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

Question

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

我需要获取索引，这样我也可以销毁组件。

代码如下

@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)

另请注意，如果您不指定索引， View 容器将销毁最后一个组件:

  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 方法。