动态组件和延迟加载，Angular Elements可以帮助我吗？

Question

我正在使用动态组件，并且正在对此进行重写以试图更好地进行说明。

AppModule

“我的应用模块”包含一个entryComponents数组，其中包含这两件事

• ContainerComponent
• TextComponent

现在我可以疯了，直到我的心满足为止

GameModule

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

• GameContainer
• GameComponent

所以现在我在这里：

我真正的目标是：

我的问题是那个GameContainer。最初它是DynamicComponentService，但是由于嵌套容器的循环依赖关系，我无法使用它。 See my recent question，在这里我将其移出了服务，然后又移回了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是什么”，这引起了我种种噩梦，因为即使在装载时，我现在在其他地方也有一些注射器，似乎无法处理。

Answer 1

这个建议太长了，无法发表评论，尽管它不是一个非常详细的答案（没有代码），但可能有用：

您可以有一个父组件，它既有动态组件，又有惰性加载的模块

这可以通过使用命名路由器出口从父组件中加载延迟加载的模块来实现。这是example app的带有命名出口的延迟加载（您可以使用GitHub地址在StackBlitz上运行）

注意：默认情况下，延迟加载在命名路由器出口中不起作用，因此您需要在该应用中使用替代方法（请参阅Angular Issue #12842的更多详细信息）

您可以使用共享服务来处理组件之间的通信（请注意，在延迟加载的模块中提供的服务或在延迟加载的模块中导入的模块中提供的服务，请创建新实例-请参见shared modules and DI-在以下内容中也有详细说明Angular文档）

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