Wie lade ich ein externes js-Skript in angular 2 in Runtime? - Javascript, eckig, Webpack, Twitter-Fabric, Twitter-Ziffern

Ich benutze Twitter-Ziffern zur Authentifizierung. Es muss ein kleines .js-Skript heruntergeladen und initialisiert werden. Sie empfehlen, die Datei direkt von ihrem Server abzurufen.

Ich muss importieren

<script id="digits-sdk" src="https://cdn.digits.com/1/sdk.js" async></script>

und initialisieren Sie das SDK mit Like Digits.init({}).

ich benutze Angle2 Webpack Starter Vorlage, die Webpack verwendet.

Früher habe ich systemjs verwendet, wo ich den Dateinamen einfach der URL zuordnen und an meiner Komponente importieren kann. So was

  var map = { "Digits":"https://cdn.digits.com/1/sdk" };

dann importieren Sie es in eckige Komponente wie import * as Digits from "Digits";

Ich weiß, dass es externe Webpacks gibt, aber es ist inkonsistent.

console.log(Digits) im ngOnInit() Manchmal zeigt das korrekte Objekt manchmal einen undefinierten Fehler.

Antworten:

Ich habe Glück gehabt. Ich verwende eine Kalender-JS-Datei und wollte das Datumsergebnis aus einer Eingabe an meinen Controller abrufen. In meinem Fall war es Pickaday. Importieren Sie die Datei wie gewohnt in der HTML-Datei.

<script src="/assets/js/pikaday.js"></script>

Dann erstellen Sie eine Klasse, die die Funktionen darstellt, die Sie benötigen.

export class PikadaySource {
field: any;
firstDay: number;
minDate: Date;
maxDate: Date;
yearRange: number = 1;
disableWeekends: boolean;
format: string = "MM-DD-YYYY";
init(){};
}

Der Zweck der Klasse besteht darin, Probleme mit dem Transpiler zu vermeiden. Da das importierte Skript sich im globalen Bereich befindet, sollte es jetzt verwendbar sein.