如何在 Angular 应用程序中启用 Bootstrap4 工具提示

Question

我正在尝试在使用 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 文件的脚本部分中。

有什么建议我可以让它发挥作用吗？

谢谢！

Answer 1

您需要安装 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();
  }
}

`

希望这可以帮助！