angular2: including thirdparty js scripts in compo

问题:

This question already has answers here:

script tag in angular2 template / hook when template dom is loaded (2 answers)

Closed 2 years ago.

Is there a way to include third party JS scripts inside an Angular2 component instead of including it in index.html?

I have a table component that wraps dataTables. It's the only component that needs the dataTables js/css includes. It would be nice if I could keep my index.html cleaner. The component decorator does let you specify css files.

I tried moving my script tags inside my component html, but that doesn't seem to work.

回答1:

Script tags in component templates are removed. A workaround is to create the script tag dynamically in ngAfterViewInit()

See also 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);
}

See also https://stackoverflow.com/a/9413803/217408