Angular 5 - 在运行时动态加载模块（在编译时未知）

2 回答

• 1

  好吧，虽然涉及复杂性，但你可以尝试一下 . 取决于你的代码库我猜 . 路由器公开 config 属性，保存它的当前配置，以及 resetConfig(routes: Routes) 方法重置配置 . 你可以从那里开始，然后在运行中添加组件 .

  但是，组件必须是可访问的 . 也许是动态创建的，如另一个答案所述 . 或者，您的配置可能包含以下内容：

  constructor(private router: Router) {}
  
  private addPlugin(routePath, pluginName, pluginPath) {
      const currentConfig = this.router.config;
      currentConfig.push({
          path: routePath,
          loadChildren: `precompiled-modules/${pluginPath}#${pluginName}`,
      });
      this.router.resetConfig(currentConfig);
  }
  

  你必须以某种方式获得pluginPath和pluginName - 可能按照惯例计算它，也许是一个lil'后端帮助器，它可能有预先配置并已加载或类似的数组 . 我还假设你有一个非常好的测试系统，以确保你的插件“兼容” . 最后，教webpack / systemjs如何准备好模块 . 总而言之，这并非不可能，但它涉及一些基础工作 .

  也就是说，Angular 6即将到来，并且随之而来的是Angular Elements . 元素将提供一种方法来将模块编译为Web组件和它们，以便它们可以在任何地方使用（不一定在Angular应用程序中） . 想想jQuery插件 - 你需要加载一个基础 jQuery.min.js ，但除此之外你还要与Angular Elements类似 - 你导出的基本上是一个Web组件 . 有一个"loader"部分（jquery.min.js等价物）和你的Element包 . 但是，您的组件只是另一个HTML节点，具有属性，属性，绑定，事件，您不需要关于输入 .

  值得等待，看看并自己决定 .

  回复于 2024-04-25T23:33:36+08:00
• 2

  您可以查看动态组件加载：https://angular.io/guide/dynamic-component-loader

  它允许您在运行时动态添加组件 .

  回复于 2024-04-25T23:33:36+08:00