在Angular中动态创建和删除组件

Question

我正在尝试动态创建和销毁组件。我们假设我有一个组件A，其中有一个按钮，我使用ComponentFactoryResolver创建了一个组件B。现在我通过多次单击按钮创建多个组件实例。我的组件B有一个html，如下所示：

<div id="container-{{index}}"
    ...more content
</div>

在我的组件B中，我想要销毁之前创建的B的其他一些实例。如何在B的新实例中获取对B的其他实例的引用？是否有可能以某种方式使用底层html的id来获取对组件的引用？

Answer 1

我会做里卡多提议的评论者并使用依赖注入。

组件A内的某处添加一个方法，该方法将由每个子组件B在其ngOnInit中调用...

 componentList : any[] = [];

 addChild(component: any) { 
    this.componentList.push(component)
 }

然后在子组件内部，将父项注入其构造函数并在ngOnInit中调用add方法，以便父项维护组件B的每个实例的数组

 constructor( private parent: ComponentA) {}

 ngOnInit() { this.parent.addChild(this); } 

现在，您可以从任何B组件访问父组件public'componentList'属性，以查看所有已创建的实例。不要忘记在ComponentB文件中导入ComponentA