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

我试图在使用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>

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

declare var $: any;

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

有什么建议我可以如何让这个工作

---

谢谢

您需要安装jquery和引导键入，以使它们在Typescript和Angular中可用

对于引导

npm安装--save@types/bootstrap

对于jquery

npm安装——保存@types/jquery

导入引导，如图所示：

导入“引导程序”

以这种方式导入jquery

import*作为$from'jquery'

确保选中后在

ngafterview中初始化引导工具提示
`

`

希望这有帮助
 我们实现了Chinomere Okereke的解决方案（谢谢），并在运行时遇到以下错误：

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

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

工作得很好！希望这有帮助
您是否尝试放置
id
并使用
getElementById
而不是
$（'[data toggle=“tooltip”]'）
？我的建议：使用ng引导。不确定为什么/如何，但这很有魅力！添加导入对我来说是个好办法。感谢有理由把它放进app.component.ts？@pixelpax，这正是我要放的地方。
import 'bootstrap';
import * as $ from 'jquery';
//extras removed for brevity
export class MyComponent implements AfterViewChecked {
  ngAfterViewChecked() {
     $('[data-toggle="tooltip"]').tooltip();
  }
}

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

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