2017-12-30 6 views
1

Ich versuche ein Trainingsprojekt zu starten, das Popper.Js in seinen Funktionen benötigt. Allerdings scheint es mir nicht zu erlauben, Popper.Js zu benutzen.Angular 5 + Popper.JS

Nach Bootstrap der docs beginne ich Popper.Js von

$(function() { 
    $('[data-toggle="tooltip"]').tooltip(); 
}); 

ich es in Hauptkomponente in ngOnInit verwenden. Es funktioniert jedoch nicht. Der Fehler tritt auf "Property 'Tooltip' existiert nicht für den Typ 'JQuery'". Ich importierte jquery und bootstrap Bundle-Datei. Typen für alle Bibliotheken sind installiert.

Ich versuchte auch die reine "popper.js" statt bootstrap.bundle.js. Aber der gleiche Fehler tritt auf. Bootstrap.bundle.js (enthält bootstrap und popper.js in der richtigen Reihenfolge) und jquery werden in angle-cli.json importiert.

Antwort

3

Führen Sie den folgenden Befehl Bootstrap jquery & popper.js zu installieren:

npm install [email protected] popper.js jquery --save 

In Winkel cli.json fügen Sie folgende Zeilen:

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

In Ihrem page.ts hinzufügen:

declare var $; 

Bearbeiten:

Nicht alle JavaScript-Bibliotheken/Frameworks verfügen über TypeScript-Deklarationsdateien. Auf der anderen Seite möchten wir vielleicht Bibliotheken/Frameworks in unseren TypeScript-Dateien verwenden, ohne dass Kompilierungsfehler auftreten. Eine Lösung besteht darin, das declare-Schlüsselwort zu verwenden. Das declare-Schlüsselwort wird für Ambient-Deklarationen verwendet, in denen Sie eine Variable definieren möchten, die möglicherweise nicht aus einer TypeScript-Datei stammt.

+1

Vielen Dank! Können Sie mir diese "Erklärung" erklären? Ich habe versucht, jquery zu importieren, aber jetzt funktioniert es mit der einfachen Deklaration. – Sergey

+1

Ich beantwortete Ihre Frage in der Bearbeiten – Melchia