webentwicklung-frage-antwort-db.com.de

Angular 5 + Bootstrap-Tooltip funktioniert nicht

Was mache ich falsch? 

Ich versuche, einen Bootstrap-Tooltip in Angular 5 zu erstellen. Wir haben die Javascript-Bibliothek über die Fußzeile der Seite index.html eingerichtet, wie empfohlen. Die Dokumente in Bootstrap verwenden JQuery, um die Elemente abzurufen, und rufen dann die Funktion tooltip() auf.

Ich denke, ich könnte vielleicht dasselbe tun, aber mit der getElementById-Funktion, um einen Griff für die Schaltfläche zu erhalten, habe ich Folgendes geschrieben (die Schaltfläche ist das Element, für das ein Tooltip definiert ist):

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

Vorlagencode (separate Datei):

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

Der Fehler bekomme ich (in der Browser-Konsole):

ERROR
Error: button.tooltip is not a function
javascriptangularbootstrap-4angular5
6
theMayer

Es gibt also ein paar Dinge, die ich tun musste, damit dies richtig funktioniert.

Angular.JSON (Angular 6)

In dieser Datei müssen Sie die Javascript- und CSS-Links für bootstrap eingeben. In früheren Versionen war die Datei .angular-cli.json bekannt. Sie ist eine Stufe tiefer. Wenn Sie diese Datei haben, müssen Sie sie ../node_modules erstellen. In jedem Fall haben Sie so etwas wie das Folgende:

  "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"
  ]

Dadurch wird das entsprechende CSS und Javascript in Ihr Webpack geladen, sodass Sie global darauf zugreifen können. Es ist sehr wichtig, sie in der richtigen Reihenfolge zu laden. Die Variationen schlagen fehl. Genauere Anweisungen finden Sie hier hier .

* .component.ts

Um den $-Operator zu verwenden, müssen Sie in jeder Ihrer Komponenten nur oben in der Datei den Typ eingeben 

declare var $;

Das ist es. Sie erhalten keine Autovervollständigung, aber die Anwendung funktioniert, wenn sie kompiliert wird.

Mit anderen JS-Bibliotheken arbeiten

Dies gilt beispielsweise auch für lodash (den _-Operator) und viele andere Javascript-Bibliotheken. Es ist auch möglich mit vielen Bibliotheken zu verwenden, zum Beispiel

import * as $ from 'jquery' - aus irgendeinem Grund habe ich es jedoch mit der jquery-Bibliothek selbst nicht als zuverlässig befunden. Es hat für viele andere gearbeitet, einschließlich moment.js und shortid .

1
theMayer

Sie können ng-bootstrap verwenden

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

Importieren Sie NgbModule in Ihr App-Modul

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

 imports: [
    NgbModule.forRoot(),
  ],

HTML:

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