Angular 4 删除动态添加的组件

Question

使用这样的东西: https://netbasal.com/dynamically-creating-components-with-angular-a7346f4a982d我正在添加多个组件，问题是稍后如何根据单击的组件删除组件？ 我想做的是创建面包屑，然后单击面包屑时，将其下方的所有内容全部删除。为了创建它们，我使用以下代码:

createCrumb(name, key, level){
  let data = {name:name, key:key, level,level, diagram: this.diagram};
  const factory = this.this.resolver.resolveComponentFactory(BreadCrumbsButton);
  let componentRef = this.container.createOmponent(factory);
  (<BreadCrumbsButton>componentRef.instance).data = data;
}

所有这些都完美地工作，但我添加了它的倍数。问题是如何删除特定的而保留其余的？

Answer 1

您可以调用destroy其方法:

  createComponent(type) {
    this.container.clear(); 
    const factory: ComponentFactory = this.resolver.resolveComponentFactory(AlertComponent);
    this.componentRef: ComponentRef = this.container.createComponent(factory);

    setTimeout(()=>{
       this.componentRef.destroy(); <--------------------
    }, 2000);
  }

我在这里使用超时用于演示目的，以便可以在屏幕上看到组件的渲染情况。