如何通过服务在另一个组件中注入/渲染角度组件

Question

我的通用组件很少（比如 C1、C2、C3），这可以在我的任何屏幕（比如 S1、S2 和 S3）中呈现。 在每个屏幕中，我都有一个用于公共组件的占位符 (<div id="common-component-placeholder"></div>)。

现在，我有一个服务，该服务将在每次 NavigationEnds 时运行，并执行一个简单的业务逻辑（假设它返回 C1），该逻辑将告诉要在屏幕中加载哪个组件。

我需要知道的是，如何通过服务将C1注入S1

Answer 1

您需要看看 ComponentFactoryResolver。完整（官方）指南位于 angular.io - 我认为它很好地描述了所有内容，因此我不会复制粘贴所有信息。

基本上，您必须将公共服务注入 S1、S2 和 S3。该服务将具有接受 viewContainerRef 的方法，并将使用工厂生成组件（基于您的业务逻辑的 C1、C2、C3）。

要记住的一件事 - 使用工厂时，除非您明确调用 viewContainerRef 方法（或者如果我没记错的话，或者在它的父“viewContainerRef”上使用 destroy()，否则您需要记住这一点，但是最好自己检查一下）它不会调用 OnDestroy 生命周期钩子。这是设计使然，因此您必须注意这一点（因为您的 C1、C2 和 C3 可能有一些在销毁时需要清除的逻辑）。