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

Question

我究竟做錯了什么？

我正在嘗試使用Bootstrap Tooltip在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中，以便它可以全局訪問。 如圖所示，以正確的順序加載它們非常重要。 變化將失敗。 更詳細的說明可以在這里找到。

* .component.ts

在每個組件中，要使用$運算符，您只需在文件頂部鍵入即可

declare var $;

而已。 您將無法獲得自動完成功能，但應用程序將在編譯時運行。

與其他JS庫一起使用

這也適用於，例如，lodash（ _運算符）和許多其他Javascript庫。 例如，許多庫也可以使用它

import * as $ from 'jquery' - 但是，出於某種原因，我還沒有發現jquery庫本身是可靠的。 它已經為許多其他人工作，包括moment.js和shortid 。