Question

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

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

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

所以，我在app.component.ts中添加了一个ngAfterViewInit（）函数来做到这一点：

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

在app 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文件的scripts部分中。

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

谢谢！

Answer 1

您需要安装jquery和bootstrap类型，以使其在Typescript和Angular中可用。

对于引导npm install --save @types/bootstrap 对于jQuery npm 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();
  }
}

`

希望这会有所帮助！

Answer 2

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

app:hintAnimationEnabled="false"

并且必须将sanitize：和sanitizeFn：添加到.tooltip（）调用中：

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

工作出色！希望对您有帮助

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

2 个答案: