从外部内容加载动态组件答案

【问题标题】：Dynamic component loading from external content从外部内容加载动态组件
【发布时间】：2017-02-28 04:53:17
【问题描述】：

我正在开发的系统由许多分布式微服务组成，每个组件可能有多个版本同时处于活动状态。

我正在尝试构建的 Angular2 应用程序应该能够通过 websocket 与这些组件中的每一个进行交互。因为为每个组件的所有未来版本和功能、各自的协议实现甚至新组件准备这个应用程序似乎是不可行的，我想把这个责任推给组件本身。

每个组件都能够通过通过同一个 websocket 连接发送的包来传达其功能（以 NG2 组件的形式）以及协议实现和必要的 GUI 元素 (HTML/CSS)。

是否有一种模式可以在 ng2 中实现组件及其模板的这种“按需加载”？

【问题讨论】：

每个组件能否独立存在于页面（正文）的顶层，每个组件都作为一个独立的 Angular 应用程序并排，它们只是相互通信还是需要像嵌套一样实际组件。
组件之间不需要嵌套或交互，但它们应该能够共享服务和库。
我猜像stackoverflow.com/questions/36566698/… 这样的东西会起作用。我不知道如何处理在不同时间加载的应用程序。例如，当名称被破坏时，如何让一个应用程序在缩小后找到另一个类。
这看起来很有希望，谢谢，我会尝试复制它。

标签： angular distributed microservices angular2-template

【解决方案1】：

看起来你可以尝试使用路由器延迟加载并提供NgModuleFactoryLoader 的自定义实现，它可以通过 websocket 加载组件。

【讨论】：

您能详细说明一下吗？
延迟加载功能模块是路由器的内置功能，可以通过提供NgModuleFactoryLoader的实现来自定义加载。所以如果想使用 web 套接字加载模块，那么你必须提供自定义加载器。
NgModuleFactoryLoader 期望实现一个 load(path:string) 方法。您是否建议：通过 websocket 接收一串已编译的 feature_module.js，将其保存到临时文件中，将临时文件路径提供给自定义 NgModuleFactoryLoader 实现？
Path 用于为模块加载器（systemjs、webpack 等）创建参数，它将自动加载预编译的功能模块。检查systemjs实现github.com/angular/angular/blob/…

【解决方案2】：

我不太确定我是否完全理解你的问题。

是否有一种模式可以在 ng2 中实现组件及其模板的这种“按需加载”？

嗯，模块的按需加载，使用延迟加载的模块，请参阅：https://angular.io/docs/ts/latest/guide/ngmodule.html#!#lazy-load 我强烈建议阅读整个指南，它真的很有帮助。

但他们应该能够共享服务和库。

Angulars 指南为此建议了一个共享模块和一个核心模块。实际上，我认为这确实是最好的方法。只需向下滚动上面的链接。

每个组件都能够通过通过同一个 websocket 连接发送的包来传达其功能（以 NG2 组件的形式）以及协议实现和必要的 GUI 元素 (HTML/CSS)。

这是我不确定的部分，就像我不知道我是否正确理解您的意思。您不想通过 websocket 连接加载组件吗？如果是这样，那为什么？如果您的意思是只为具有相同 websocket 的每个组件进行通信：我建议使用这样做的服务，这将是核心模块的一部分，因此是单例。然后组件可以访问此服务，因此它们始终连接到同一个 websocket。

【讨论】：

感谢您的回答。我已经根据 bergben 和 kemsky 的回答实现了一个原型。不幸的是，我无法在两个帖子中平均分配赏金。抛硬币决定将赏金交给 bergben。

【解决方案3】：

以下是可以实现的步骤。

使用 systemjs 加载器在你的路由器中加载组件 ``
在您的 systemjs 配置文件中提供组件的路径

这些 examples 解释得更详细。

【讨论】：