2016-02-23 2 views
6

Есть ли способ включить сторонние JS-скрипты внутри компонента Angular2 вместо того, чтобы включать его в index.html?angular2: в том числе скрипты третьих сторон js в компоненте

У меня есть компонент таблицы, который обертывает dataTables. Это единственный компонент, который нуждается в dataTables js/css. Было бы неплохо, если бы я смог сохранить мой index.html очиститель. Декоратор компонентов позволяет вам указывать файлы css.

Я попытался переместить свои теги скриптов внутри моего компонента html, но это, похоже, не работает.

+0

да, вы можете загрузить третью сторону 'css' в нужных Вам компоненту только в styleUrls. Я не знаю о '.js' файлах –

+0

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

+0

Вы считаете PrimeNG DataTable, это собственный компонент. http://www.primefaces.org/primeng/#/datatable –

ответ

10

Сменные метки в шаблонах компонентов удалены. Обойти это можно создать тег сценария динамически в ngAfterViewInit()

Смотрите также 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); 
} 

Смотрите также https://stackoverflow.com/a/9413803/217408

+0

это не работает должным образом. Угловые выбросы error. This.elementRef.nativeElement.append не является функцией?? Зачем ? –

+0

@PardeepJain Я думаю, что правильное имя функции - 'appendChild (s)' в JS/TS. В Dart это «append (s)», и я его перепутал. –

+0

У меня есть ссылка: document.getElementById. Загрузка скриптов, но код js, который нуждается в этих сценариях, не выполняется должным образом при начальной загрузке (после обновления он работает). На самом деле, я не думаю, что это было бы решением, даже если бы это сработало. Мои вопросы заключались в том, чтобы увидеть, есть ли чистый/стандартный «угловой способ» для включения js-зависимостей только в тех компонентах, которые в них нуждаются. – dvulanov

Смежные вопросы