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

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中。

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