将外部js导入到一个组件中

Question

当我将外部js导入角度4的一个组件时，在每个组件中都会加载它。如何将该js文件仅导入到一个组件中，以及仅在函数调用时如何加载它。

//custom component
import * as extjs from '../assets/extjs.js';

constructor(){
this.myfunction();
}


myfunction(){
extjs.extfunc();
}

Answer 1

原因是当您导入模块时，它将直接注入角度app.js文件。所以，所有模块都可以使用它。 例如，当您对另一个组件执行此操作时：

declare var extjs: any;
console.log(extjs);

您的extjs返回ext。

所以我建议您使用dynamic import，这样只有在组件需要使用它时才会弹出你的extjs。

怎么做？

在文件tsconfig.app.json的文件夹src中，更改以下行：

"module": "es2015"

这一行：

"module": "esnext"

它允许你制作延迟加载脚本。

所以在你的组件中，只需这样做：

constructor(){
   this.myfunction();
}


async myfunction(){
  const extjs = await import('../assets/extjs.js');
  extjs.extfunc();
}

将您的网络标签检入您的开发工具，加载此组件或将其注入另一个组件，您将看到生成了大量的extjs。

希望它对你有所帮助。

Answer 2

您需要类似dynamic import的内容，因此可以将导入移动到该功能，并仅在必要时执行。目前，如果有的话，这并没有得到很好的支持。