Question

我想在 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 ^^^^
}

尝试使用

this.dynamicInsert.remove(index: number)销毁组件

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

this.dynamicInsert.indexOf(viewRef: viewRef)

Answer 1

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

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;
     }

因此，如果您只有一个组件，则无需传递索引。

要删除所有组件，您可以使用clear方法。

Answer 2

如果你想要销毁创建的组件，你可以考虑一个快捷方式，只需订阅它的可观察的破坏：

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

然后在删除事件时，在AssetOptionComponent中调用它：

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

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

Working demo

Angular，获取ViewContainerRef中动态创建的组件的索引

2 个答案: