Angular 5 + Bootstrap工具提示不起作用

Question

我究竟做错了什么？

我正在尝试使用Bootstrap工具提示在Angular 5中工作.我们按照建议通过index.html页面的页脚设置了Javascript库.Bootstrap上的文档使用JQuery来获取元素,然后调用tooltip()它们上的函数.

想我可能也可以这样做,但是使用getElementById函数来获取按钮的句柄,我写了以下内容(按钮是在其上定义了工具提示的项目):

  ngAfterViewInit(){
    let button = document.getElementById('tooltipBtn');
    button.tooltip();
  }

模板代码(单独的文件):

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" id="tooltipBtn">
  Tooltip on bottom
</button>

我得到的错误(在浏览器控制台中):

ERROR
Error: button.tooltip is not a function

Answer 1

您可以使用ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

在您的应用模块中导入NgbModule

import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 

 imports: [
    NgbModule.forRoot(),
  ],

HTML：

 <button class="btn btn-secondary" placement="bottom" ngbTooltip="Tooltip Text..!!">

Answer 2

因此，我必须做一些事情才能使其正常工作。

Angular.JSON（Angular 6）

在此文件中，需要放入引导程序的 Javascript 和 CSS 链接。该文件过去被称为.angular-cli.json以前的版本，并且它更深一层，因此如果您有该文件，则需要将其制作为../node_modules. 无论如何，您都会得到类似以下内容的内容：

  "styles": [
   "src/styles.scss",
   "node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
   "../node_modules/jquery/dist/jquery.js",
   "../node_modules/tether/dist/js/popper.js",
   "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

这会将适当的 CSS 和 Javascript 加载到您的 webpack 中，以便全局可访问。按正确的顺序加载它们非常重要，如图所示。变化将会失败。可以在此处找到更详细的说明。

*.组件.ts

在每个组件中，要使用$运算符，您所要做的就是在文件顶部键入

declare var $;

就是这样。您不会获得自动完成功能，但应用程序将在编译后运行。

与其他 JS 库合作

这也适用于 lodash（运算_符）和许多其他 Javascript 库。也可以使用许多库，例如，

import * as $ from 'jquery'- 但是，由于某种原因，我还没有发现这对图书馆本身来说是可靠的jquery。它对许多其他人都有效，包括moment.js和shortid。