Javascript 角度，获取ViewContainerRef内动态创建的组件的索引

我正在尝试获取ViewContainerRef中动态创建的组件的索引

我需要得到索引，这样我也可以销毁组件

代码如下

@ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: ViewContainerRef

componentFactory

constructor(
  private componentFactoryResolver: ComponentFactoryResolver,
  private viewContainerRef: ViewContainerRef,
) { }

ngAfterViewInit() {
  this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(AssetOptionComponent);
}

addAssetOption() {
  const dynamicComponent = <AssetOptionComponent>this.dynamicInsert.createComponent(this.componentFactory).instance
  // how to get index of this dynamically generated component ^^^^
}

@ViewChild（'dynamicSert'，{read:ViewContainerRef}）dynamicSert:ViewContainerRef
零部件厂
建造师(
专用componentFactoryResolver:componentFactoryResolver，
私有viewContainerRef:viewContainerRef，
) { }
ngAfterViewInit（）{
this.componentFactory=this.componentFactoryResolver.resolveComponentFactory（AssetTopionComponent）；
}
addAssetOption（）{
const dynamicComponent=this.dynamicSert.createComponent（this.componentFactory）.instance
//如何获取此动态生成组件的索引^^^^
}

试图使用

此.dynamicSert.remove（索引：编号）

销毁组件

但是我首先需要动态创建的组件的索引

---

this.dynamicSert.indexOf（viewRef:viewRef）

要获取索引，可以使用方法和属性：

const index = this.dynamicInsert.indexOf(dynamicComponent.hostView)

还要注意，如果不指定索引视图容器，则会销毁最后一个组件：

  remove(index?: number): void {
    const viewData = detachEmbeddedView(this._data, index);
    if (viewData) {
      Services.destroyView(viewData);
    }
  }

   export function detachEmbeddedView(elementData: ElementData, viewIndex?: number): ViewData|null {
  const embeddedViews = elementData.viewContainer !._embeddedViews;
     if (viewIndex == null || viewIndex >= embeddedViews.length) {
        viewIndex = embeddedViews.length - 1;
     }

所以，如果只有一个组件，则不需要传递索引

---

若要删除所有组件，可以使用<代码>清除>代码>方法.< /p> < p>如果您正在寻找破坏创建的组件，您可以考虑订阅它可观察到的破坏：

addAssetOption() {
   const dynamicComponent: ComponentRef<any> = this.dynamicInsert.createComponent(this.componentFactory);
     dynamicComponent.instance.destroy.subscribe(() => dynamicComponent.destroy())
}

addAssetOption（）{
const dynamicComponent:ComponentRef
Yep！您也可以只存储对组件的引用，以及对实例的单独引用。-->ref=this.container.createComponent（component）-->instance=ref.instance-->然后您可以只使用ref.destroy（）此方法不适用于
const dynamicComponent=this.dynamicSert.createComponent（this.componentFactory）.instance
但适用于
const dynamicComponent=this.dynamicSert.createComponent（this.componentFactory）
。给出一个错误，即类型“AssetOptionComponent”上不存在属性“hostView”

是的hostView是基础ComponentRef对象的属性，而不是实例的属性。有关如何获取instance@locnguyen，视图容器存储组件引用，而不是实例，这就是它返回组件引用A的原因组件实例只是组件参考的一部分。我展示的方式是唯一正确的方式。请参阅更新答案中的StackBlitz演示

 export class AssetOptionComponent  {
  destroy = new Destroyable();
  delete(){
    this.destroy.delete();
  }
}

export class Destroyable extends Subject<any>{
 delete() {
    this.next();
  } 
}