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

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

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

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

建议？

Answer 1

您是否尝试在ngOnInit（）中加载脚本？函数ngOnInit（）在组件DOM，依赖项注入和输入绑定完成之后启动。或添加异步并等待。

 export class MyComponent implements OnInit{
   async ngOnInit() {
     await this.loadScript('../assets/js/my-library.js');
   }
  }

  async public loadScript(url: string) {
     ...
  }

Answer 2

使用AfterContentChecked LifeCycle。

AfterContent挂钩   AfterContent挂钩类似于AfterView挂钩。关键区别在于子组件。

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

-AfterContent挂钩与ContentChildren有关，后者是Angular投影到组件中的子组件。

另一种方法：

我很久以前用以下方法解决了这个问题：

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

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

2 个答案: