Angular: загрузить скрипт внешнего файла JS после загрузки Component View

Question

В моем приложении Anglar 5 у меня есть файл сценария js, который я хочу загружать динамически после загрузки представления моего компонента ,

, это потому, чтомой скрипт работает с шаблоном моего компонента, и мне нужно загрузить представление для запуска

Я пробовал это:

export class MyComponent implements AfterViewInit{
   title = 'app';
   ngAfterViewInit() {
     this.loadScript('http://www.some-library.com/library.js');
     // OR THIS
     this.loadScript('../assets/js/my-library.js');
   }
  }

  public loadScript(url: string) {
    const body = <HTMLDivElement> document.body;
    const script = document.createElement('script');
    script.innerHTML = '';
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
  }
}

Но он все еще загружает мои js перед загрузкой моего компонента HTMLфайл.и это приводит к неработающему сценарию.

(я вижу его в теле, но на самом деле он не работает)

Моя цель - загрузить файл js после загрузки моего компонента.

Предложения?

Answer 1

Используйте AfterContentChecked LifeCycle .

крючки AfterContent Хуки AfterContent аналогичны хукам AfterView. Основное различие заключается в дочернем компоненте.

- Хуки AfterView касаются ViewChildren, дочерних компонентов, теги элементов которых присутствуют в шаблоне компонента.

- Хуки AfterContent относятся к ContentChildren, дочерним компонентам, которые Angular проецирует на компонент.

Другой подход:

Я решил это давным-давно с помощью:

ngAfterViewInit() {
    setTimeout(() => {
        doSomething();
    }, 0);
}