Angular 8和Bootstrap 4工具提示

如何解决Angular 8和Bootstrap 4工具提示

我正在尝试从我的Web应用程序中的引导程序4中完成工具提示，根据引导程序文档，我应该使用此代码初始化工具提示

$(function () { $('[data-toggle="tooltip"]').tooltip() })（在app.component.ts中完成）

还应在angular.json中将popper.min.js放在bootstrap.min.js之前（完成）

很明显，我已经安装了npm bootstrap和jquery，并在另一篇文章中读到它们在app.component.ts中进行了两次导入

import 'bootstrap' and import * as $ from 'jquery';

并且他们也将AfterViewChecked准确地添加到AppComponent类的实现中，例如

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

当我完成所有这些操作时，工具提示实际上可以工作，但是import 'bootstrap'对于其余的bootstrap.js产生了一些问题，因为我的li标记下拉列表停止工作了。有人可以帮我吗？谢谢！

解决方法

我建议您使用 Angular Bootstrap 库来代替jQuery，

• https://ng-bootstrap.github.io/#/home
• https://valor-software.com/ngx-bootstrap/#/

它们将使您的工作更加轻松，而您不必添加jQuery。

关于工具提示：

1-安装Ngx引导程序

ng add ngx-bootstrap

2-将TooltipModule添加到您的AppModule

import { TooltipModule } from 'ngx-bootstrap/tooltip';

@NgModule({
  imports: [TooltipModule.forRoot(),...]
})
export class AppModule(){}

3-使用工具提示功能

<button type="button" class="btn btn-primary" tooltip="Lorem ipsum.">
  Simple demo
</button>

您可以在此处找到更多信息：https://valor-software.com/ngx-bootstrap/#/tooltip。