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

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

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

constructor(){
this.myfunction();
}


myfunction(){
extjs.extfunc();
}

---

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

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

您的extjs返回extsapi

因此，我建议您使用，因此只有当组件需要使用extjs时，才会弹出extjs

怎么做

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

"module": "es2015"

这一行：

"module": "esnext"

它将允许您创建延迟加载脚本

因此，在您的组件中，只需执行以下操作：

constructor(){
   this.myfunction();
}


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

将您的网络选项卡检查到您的开发工具中，加载此组件或将其注入另一个组件，您将看到生成了extjs块

---

希望它能对您有所帮助。

您需要类似于的东西，以便可以将导入移到函数中，并且仅在必要时执行。目前，这还没有得到很好的支持。

谢谢。我浪费了更多的时间来做这件事。延迟加载对我来说是有效的。有没有任何方法可以动态卸载jquery。例如，单击按钮时，卸载extjs.js