如何在 Angular 应用程序中启用 Bootstrap4 工具提示
How to enable Bootstrap4 tooltips inside an Angular app
我正在尝试在使用 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 文件的脚本部分中。
有什么建议可以使它正常工作吗?
谢谢!
您需要安装 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();
}
}
`
希望对您有所帮助!
我们实施 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 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 文件的脚本部分中。
有什么建议可以使它正常工作吗?
谢谢!
您需要安装 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();
}
}
`
希望对您有所帮助!
我们实施 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});
}
干得好!希望这有帮助