Ich habe eine eckige 4-Anwendung und eine Javascript-Komponente, die ich in einer Javascript-Datei erstellt habe: timeline.js
. Die Javascript-Komponente funktioniert gut, aber ich möchte sie mit eckig 4 verwenden. Also lege ich meine js-Datei in den Ordner assets/js/timeline.js
.
In der Datei index.html
rufe ich meine js-Datei mit <script src="assets/js/timeline.js"></script>
auf und in app.component.ts
habe ich:
var timeline = new Timeline("timelineVisualization")
Normalerweise wird die Zeitleiste im div erstellt, das id="timelineVisualization"
hat.
Aber es funktioniert nicht und ich habe einen Fehler im new Timeline
: Name Timeline kann nicht gefunden werden.
Wissen Sie, wie ich den Timeline-Konstruktor von timeline.js
aufrufen kann?
sie müssen es einfach tun
import * as Timeline from '../assets/js/timeline.js';
Sie können auch (oben in Ihrer Datei) Folgendes tun:
declare var Timeline: any;
Überprüfen Sie auch unter auf bewährte Verfahren.
Um nur die oben Antwort von @Deblaton Jean-Philippe zu erweitern, ist es als allgemeine Praxis empfehlenswert, Ihre Js- oder andere CSS-Dateien als Teil des Builds zu verwenden, anstatt sie in Ihre index.html zu setzen.
Wenn Sie einen Bundler verwenden, verwenden Sie so etwas.
"styles": [
"styles.scss",
//Other style files
],
"scripts": [
"../node_modules/jsplugin/dist/js/plugin.js",
//Other script files
],
Weiter oben etwas mehr
wir können die Bibliothek auf andere Weise zum Projekt hinzufügen
Hinzufügen in HTML
<html lang="en">
<script src="https://nexplayer.nexplayersdk.com/latest/nexplayer.js">
</script>
<head>
</head>
<body>
<app-root></app-root>
</body>
</html>
Hinzufügen in angle.json oder .angular-cli.json
"scripts": [
"../node_modules/jsplugin/dist/js/plugin.js",
//Other script files
],
komponente hinzufügen
import * as Timeline from '../assets/js/timeline.js';
das zweite ist, den Namen der Bibliothek zu deklarieren
fügen Sie die Komponente hinzu
import { OnInit } from '@angular/core';
declare var library: any;
in der Typdefinition (* .d.ts) .Erstellen Sie, wenn die Datei src/typings.d.ts nicht vorhanden ist, andernfalls öffnen Sie sie und fügen Sie ihr Paket hinzu
declare module 'your-library'
Versuche dies:
declare const Timeline;
Sie können versuchen, Ihre Typdefinitionen zu finden:
Definitiv getippte Github-Seite
Wenn Sie Ihre Bibliothek nicht finden, können Sie Ihre Schnittstellen selbst schreiben (und versuchen, sie für andere Entwickler auf die Github-Seite zu ziehen). Diese Schnittstelle verhält sich wie eine .ts-Datei.
Hier ist ein Anfang
declare global {
interface Window {
Timeline: any
}
}