Question

我做错了什么？

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

想我可能也能这样做，但是使用getElementById函数来获取按钮的句柄，我写了以下内容（按钮是在其上定义了工具提示的项目）：< / p>

  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中，以便可以全局访问。 按照正确的顺序加载它们非常重要，如图所示。变体将失败。更详细的说明，请参见here。

*。component.ts

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

declare var $;

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

与其他JS库合作

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

import * as $ from 'jquery'-但是，由于某种原因，我还没有发现jquery库本身是否可靠。它适用于许多其他应用，包括moment.js和shortid。

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

2 个答案: