3

我正在尝试在使用 Angular CLI 构建的 Angular 应用程序中使用 Bootstrap4 工具提示。

Bootstrap4 alpha 文档说我需要运行此命令才能启用工具提示：

$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})

因此，我在 app.component.ts 中添加了一个 ngAfterViewInit() 函数来做到这一点：

ngAfterViewInit() {
    $('[data-toggle="tooltip"]').tooltip();
}

在应用程序 html 文件中使用这个：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Hi there!">
    Tooltip Test
</button>

将鼠标悬停在按钮上时，我确实看到了一个工具提示，但这只是一个普通的浏览器工具提示，而不是 Bootstrap4 工具提示。

在运行时，我收到错误：

ERROR ReferenceError: $ is not defined

将此行添加到组件没有帮助。

declare var $: any;

我已经仔细检查了 jquery、tether 和 boostrap js 文件是否按顺序包含在项目 angular-cli.json 文件的脚本部分中。

有什么建议我可以让它工作吗？

谢谢！

4

2 回答 2

11

你需要安装 jquery 和 bootstrap 类型以使它们在 Typescript 和 Angular 中可用。

对于引导程序npm install --save @types/bootstrap 对于 jquerynpm install --save @types/jquery

如图所示导入引导程序： import 'bootstrap'

以这种方式导入jquery import * as $ from 'jquery'

确保在ngAfterViewChecked `中初始化引导工具提示

import 'bootstrap';
import * as $ from 'jquery';
//extras removed for brevity
export class MyComponent implements AfterViewChecked {
  ngAfterViewChecked() {
     $('[data-toggle="tooltip"]').tooltip();
  }
}

`

希望这可以帮助！

于 2018-08-01T03:47:33.517 回答
0

我们实现了 Chinemere Okereke 的解决方案（谢谢）并在运行时遇到以下错误：

ERROR Error: TOOLTIP: Option "sanitizeFn" provided type "window" but expected type "null|function)"

并且必须将 sanitize: 和 sanitizeFn: 添加到 .tooltip() 调用中：

ngAfterViewChecked() {
    const $ = $_;
    $('[data-toggle="tooltip"]').tooltip({sanitize: false, sanitizeFn: content => content});
}

工作很棒！希望这可以帮助

于 2019-06-28T20:09:30.103 回答