如何在 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.

中使用它们

对于bootstrap npm install --save @types/bootstrap 对于 jquery npm install --save @types/jquery

导入bootstrap如图： import 'bootstrap'

这样导入jquery import * as $ from 'jquery'

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

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

`

希望对您有所帮助！

Answer 2

我们实施 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});
}

干得好！希望这有帮助

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

How to enable Bootstrap4 tooltips inside an Angular app

angular

tooltip

bootstrap-4

tether