仅将外部 js 导入一个组件答案

【问题标题】：import external js into only one component仅将外部 js 导入一个组件
【发布时间】：2018-03-24 18:24:53
【问题描述】：

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

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

constructor(){
this.myfunction();
}


myfunction(){
extjs.extfunc();
}

【问题讨论】：

【解决方案1】：

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

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

你的extjs返回exts api。

所以我建议你使用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 块。

希望对你有帮助。

【讨论】：

【解决方案2】：

您需要dynamic import 之类的东西，因此可以将导入移动到函数中，并且仅在必要时执行。目前，这并没有得到很好的支持。

【讨论】：