Angular：加载组件视图后加载外部 JS 文件脚本答案

【问题标题】：Angular : load an extrenal JS file script after Component View loadedAngular：加载组件视图后加载外部 JS 文件脚本
【发布时间】：2019-10-14 02:05:57
【问题描述】：

在我的 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);
  }
}

但它仍然会在加载我的组件 HTML 文件之前加载我的 js。，这会导致我的脚本不运行。

（我在体内看到它，但实际上它不起作用）

我的目的是在我的组件加载之后加载我的 js 文件。

建议？

【问题讨论】：

用setTimeout 5 秒测试它。有效吗？
@Gaspar 来吧，这太脏了:)
是的，但只是为了测试哈哈
只需使用 ngOnInit() 而不是 ngAfterViewInit() 并在 ngOnInit() { this.loadScript(); 中加载“loadScript()” }
AfterViewInit 在OnInit 之后调用。如果AfterViewInit 不起作用，OnInit 也不起作用

标签： javascript angular typescript ecmascript-6

【解决方案1】：

使用AfterContentChecked LifeCycle。

AfterContent 挂钩 AfterContent 挂钩类似于 AfterView 挂钩。主要区别在于子组件。

-AfterView 钩子涉及 ViewChildren，其元素标签出现在组件模板中的子组件。

-AfterContent 挂钩涉及 ContentChildren，Angular 投射到组件中的子组件。

另一种方法：

我很久以前就解决了这个问题：

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

【讨论】：