1

我正在使用动态组件，我正在重新编写它以尝试更好地解释。

应用模块

我的应用程序模块包含一个entryComponents包含这两个东西的数组

  • ContainerComponent
  • TextComponent

现在我可以疯狂到心满意足为止

在此处输入图像描述

游戏模块

但是，现在我有一个问题。我的一些组件是游戏，它们很重，实际上它们可能永远不会被使用。因此，我必须有延迟加载的路线。GameModule有以下

  • GameContainer
  • GameComponent

所以现在我在这个地方：

在此处输入图像描述

而我真正的目标是：

在此处输入图像描述

我的问题是GameContainer。最初它是一个DynamicComponentService，但由于嵌套容器的循环依赖关系，我无法使用它。 请参阅我最近的问题，我将它从服务中移出并返回到Container.

问题是我似乎无法成功扩展Container. 我希望我能做到这一点：

protected constructComponent(config: IThing){  
       switch (config.selector){
           default: 
              // `app-text` will be handled
              return super.constructComponent(config);
              // my module extends with this new capability
           case `app-game-component`:
              return this.createGameComponent(config);
       }
}

但这不起作用，我的覆盖constructComponent似乎从未在我的GameContainer. 所以这个想法就消失了。

Angular Elements 会帮助我吗？

我目前最大的问题是弄清楚如何正确处理这两组entryComponents. 我已经没有选择或策略了。

然后我读了一篇文章AngularElements，我真正想知道的是这是否对我有帮助？当我使用时AngularElements，是否可以在应用程序级别注册我的所有组件，以便我的单机Container可以访问所有“工厂”，但仍然可以从延迟加载中受益？

Angular 在说“看，伙计，我不知道是什么app-game”，这让我做了各种各样的噩梦，因为即使我加载它，我现在在其他地方也有一些注射器，我似乎无法处理它.

4

1 回答 1

1

这个建议太长了，不能发表评论，虽然不是很详细的答案（没有代码），但它可能有用：

您可以有一个父组件，它同时具有动态组件和延迟加载的模块

这可以通过使用命名路由器出口从父组件中加载延迟加载的模块来实现。这是一个使用命名插座延迟加载的示例应用程序（您可以使用 GitHub 地址在 StackBlitz 上运行它）

注意：默认情况下，延迟加载在命名路由器插座中不起作用，因此您需要在该应用程序中使用解决方法（请参阅更多详细信息Angular 问题 #12842）

您可以使用共享服务处理组件之间的通信（请记住，延迟加载模块中提供的服务，或导入到延迟加载模块中的模块中提供的服务，创建新实例 - 请参阅共享模块和 DI - 也在 Angular 文档中详细说明）

我建议构建一个演示应用程序来测试这种方法，而不是尝试编辑您当前的应用程序

于 2018-07-24T14:01:45.443 回答