2016-02-23 7 views
6

Gibt es eine Möglichkeit, JS-Skripte von Drittanbietern in eine Angular2-Komponente aufzunehmen, anstatt sie in index.html einzubinden?angular2: einschließlich Drittanbieter-JS-Skripts in Komponente

Ich habe eine Tabellenkomponente, die DataTables umschließt. Es ist die einzige Komponente, die die DataTables js/css includes benötigt. Es wäre schön, wenn ich meine index.html sauberer halten könnte. Mit dem Komponenten-Decorator können Sie CSS-Dateien angeben.

Ich habe versucht, meine Skript-Tags in meiner Komponente HTML zu verschieben, aber das scheint nicht zu funktionieren.

+0

zu schaffen ja Sie in styleUrls nur Dritter 'css' in Ihre erforderliche Komponente laden. Ich weiß nicht über '.js' Dateien –

+0

dup von http://stackoverflow.com/questions/34140065/script-tag-in-angular2-template-hook-when-template-dom-is-loaded –

+0

Haben Sie PrimeNG in Betracht gezogen DataTable, es ist eine native Komponente. http://www.primefaces.org/primeng/#/datatable –

Antwort

10

Skript-Tags in Komponentenvorlagen werden entfernt. Eine Abhilfe ist das Skript-Tag dynamisch in ngAfterViewInit()

See https://github.com/angular/angular/issues/4903

import { DOCUMENT } from '@angular/common'; 
... 

constructor(private @Inject(DOCUMENT) document, 
      private elementRef:ElementRef) {}; 

ngAfterViewInit() { 
    var s = this.document.createElement("script"); 
    s.type = "text/javascript"; 
    s.src = "http://somedomain.com/somescript"; 
    this.elementRef.nativeElement.appendChild(s); 
} 

Siehe auch auch https://stackoverflow.com/a/9413803/217408

+0

dies scheint nicht richtig zu funktionieren Winkelfehler "this.elementRef.nativeElement.append ist keine Funktion"? Warum ? –

+0

@PardeepJain Ich denke, der korrekte Funktionsname ist 'appendChild (s)' in JS/TS. In Dart ist es 'append (s)' und ich habe es gemischt. –

+0

Ich habe stattdessen eine Referenz über: document.getElementById. Die Skripte werden geladen, aber der js-Code, der diese Skripte benötigt, wird beim ersten Laden nicht ordnungsgemäß ausgeführt (nach der Aktualisierung funktioniert es). Wirklich, ich denke nicht, dass dies eine Lösung wäre, selbst wenn es funktioniert. Meine Fragen waren, ob es einen sauberen/standardmäßigen "eckigen Weg" gibt, um js-Abhängigkeiten nur in die Komponenten aufzunehmen, die sie brauchen. – dvulanov

Verwandte Themen