Angular 如何检查viewContainerRef中是否已存在组件

Im动态添加组件，如下所示：

export class CustomersOverviewComponent implements OnInit, OnDestroy {

  @ViewChild(PanelDirective) customerHost: PanelDirective;

  constructor(private componentFactoryResolver: ComponentFactoryResolver, private sidebarService: SidebarService) {

  }

  ngOnDestroy(): void {

  }

  ngOnInit(): void {
    console.log('init');

    this.sidebarService.currentAddPanel.subscribe(panel => {
      if (panel instanceof PanelItem) {
        this.loadcomponent(panel);
      }
    });
  }

  loadcomponent(panel: PanelItem): void {
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(panel.component);
    let viewContainerRef = this.customerHost.viewContainerRef;

    console.log('viewcontainer', viewContainerRef);
    console.log('element', viewContainerRef.element);

    let componentRef = viewContainerRef.createComponent(componentFactory);

    (<IPanel>componentRef.instance).data = panel.data;
    (<IPanel>componentRef.instance).self = componentRef;
  }


}

导出类CustomerOverview组件实现OnInit、OnDestroy{
@ViewChild（PanelDirective）customerHost:PanelDirective；
构造函数（私有componentFactoryResolver:componentFactoryResolver，私有sidebarService:sidebarService）{
}
ngOnDestroy（）：void{
}
ngOnInit（）：void{
console.log（'init'）；
此.sidebarService.currentAddPanel.subscribe（面板=>{
if（PanelItem的面板实例）{
这是一个组件（面板）；
}
});
}
loadcomponent（配电盘：配电盘项目）：无效{
让componentFactory=this.componentFactoryResolver.resolveComponentFactory（panel.component）；
让viewContainerRef=this.customerHost.viewContainerRef；
log（'viewcontainer'，viewContainerRef）；
log（'element'，viewContainerRef.element）；
让componentRef=viewContainerRef.createComponent（componentFactory）；
（componentRef.instance）.data=panel.data；
（componentRef.instance）.self=componentRef；
}
}

但是在向viewContainer添加新组件之前，我想循环查看它，并检查我的组件是否已经存在。我该怎么做

---

我在viewContainerRef中看不到任何可循环的属性。

您不能在本地分配它吗

loadcomponent(panel: PanelItem): void {
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(panel.component);
    let viewContainerRef = this.customerHost.viewContainerRef;

    if (!this.componentRef) {
        this.componentRef = viewContainerRef.createComponent(componentFactory);
    }

    (<IPanel>this.componentRef.instance).data = panel.data;
    (<IPanel>this.componentRef.instance).self = this.componentRef;

loadcomponent（面板：PanelItem）：无效{
让componentFactory=this.componentFactoryResolver.resolveComponentFactory（panel.component）；
让viewContainerRef=this.customerHost.viewContainerRef；
如果（！this.componentRef）{
this.componentRef=viewContainerRef.createComponent（componentFactory）；
}
（this.componentRef.instance）.data=panel.data；
（this.componentRef.instance）.self=this.componentRef；

---

}

是我弄错了，还是你实际上使用的是Angular5，而不是angularjs？@SPArchaeologist sry我指的是Angular 5。别担心，Angular上经常出现错误的标记。我刚刚浏览了angularjs的问题，看到了这个问题，注意到了错误，尽管我应该警告你。是的，也许我可以在本地列出一个列表，然后检查我的列表中是否存在该组件。但必须有另一种方法来做到这一点。可以使用“viewContainerRef.createComponent（componentFactory）”创建组件。为什么不能检查组件是否存在。hmmYou可以检查视图如何嵌套在视图容器中：

https://angular.io/api/core/ViewContainerRef

。基本上，如果（this.viewContainerRef.length==0）{/*no component*/}是，我可以检查长度，但不能检查视图的类型。我只想在视图中添加唯一的组件，没有重复项。