Question

我的角度应用程序具有form组件，该组件依赖于外部脚本才能正常工作，

我知道要将外部脚本包含在angular中，我们可以执行以下操作之一：-

在angular.json文件中输入条目
将脚本包含在index.html
将脚本文件包含在component.html文件中
将脚本导入component.ts文件中

以上所有方法均全局包含脚本，并且在未加载组件时不起作用。

我希望附加到组件的脚本在每次加载/路由时都能运行。所有CSS都可以正常工作。

有什么办法可以使外部脚本在组件本地，并在每次加载时重新运行该脚本？

Answer 1

听起来像dynamic import expressions的情况。他们看起来像这样（引用文章）：

import("./widget").then(widget => {
    widget.render(container);
});

renderWidget();

Answer 2

在以下位置创建了一个示例 https://stackblitz.com/edit/angular-hadyfy概述了如何仅将脚本执行包括在所需的组件（示例中的c1组件）中。

让我知道这是否可以解决您的问题。

基本上，这里的想法是找回将脚本元素子级加载到document ==> head元素的基础。

    ngAfterViewInit() {
let url = "assets/c1.js";  //external script url
let head = document.getElementsByTagName("head")[0];
let scrs = head.getElementsByTagName("script");
for(let i=0;i<scrs.length; i++){     
  let scr = scrs[i];

  if(scr.outerHTML.indexOf(url) >0){
    head.removeChild(scr);
  }
}
    let script = document.createElement("script");
    script.src = url;
    script.type ="text/javascript";
    script.async = true;
    script.defer = true;
    head.appendChild(script);

}

Answer 3

您可以尝试ngZone并在angular之外运行脚本

Answer 4

尝试研究that，那里的人介绍了如何动态下载模块（js文件）并使用它，因此您可以从ngOnInit或{{1} }插入您的组件。

如何仅将外部脚本包括在组件中？

4 个答案: