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



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

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

我需要知道的是,如何通过服务

将C1注入S1

您将需要查看ComponentFactoryResolver。完整的(官方)指南在角上。我认为它描述的很好,所以我不会复制粘贴所有的信息。

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

有一件事要记住-当使用工厂,你会想要记住,除非你显式调用destroy()方法(或使用clear()上它的父'viewContainerRef',如果我没记错,但更好的检查它自己),它不会调用OnDestroy生命周期钩子。这是设计上的,所以你必须注意到这一点(因为你的C1、C2和C3可能有一些逻辑,在它们被销毁时需要清除)。

相关内容

  • 没有找到相关文章

最新更新