web-dev-qa-db-ja.com

Angular 5 + Bootstrap Tooltip Not Working

私は何を間違えていますか？

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
javascriptangularbootstrap-4angular5
7
theMayer

そのため、これを適切に機能させるために私がしなければならなかったことがいくつかあります。

Angular.JSON（Angular 6）

このファイルには、ブートストラップ用のJavascriptおよびCSSリンクを配置する必要があります。以前のバージョンでは.angular-cli.jsonと呼ばれていたファイルが1レベル深いため、そのファイルがある場合は../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がWebパックにロードされ、グローバルにアクセスできるようになります。 示されているように、正しい順序でロードすることが非常に重要です。バリエーションは失敗します。より詳細な手順は こちら にあります。

*。component.ts

各コンポーネント内で、$演算子を使用するには、ファイルの先頭に次のように入力するだけです。

declare var $;

それでおしまい。オートコンプリートは取得されませんが、アプリケーションはコンパイルされると機能します。

他のJSライブラリとの連携

これは、たとえばlodash（_演算子）やその他の多くのJavascriptライブラリにも適用されます。多くのライブラリで使用することもできます。たとえば、

import * as $ from 'jquery'-ただし、何らかの理由で、jqueryライブラリ自体で信頼できることはわかりません。 moment.js や shortid など、他の多くの製品でも機能します。

3
theMayer

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..!!">
6
anud33p