Angular 4动态创建组件及获取现存组件实例的技术问询

嘿，我来给你捋捋这个问题的两种解决方案，都是Angular场景下常用的思路，应该能解决你的困扰：

一、直接获取动态创建的组件实例 #

如果你是通过ComponentFactoryResolver动态创建组件，其实根本不用绕ViewRef——创建过程中就能直接拿到组件实例，还能顺手维护存活组件的引用列表：

import { Component, ComponentFactoryResolver, ViewContainerRef, ComponentRef } from '@angular/core';
import { YourDynamicComponent } from './your-dynamic.component';

export class ParentComponent {
  // 专门存存活的组件引用，删除时同步移除
  private activeComponentRefs: ComponentRef<YourDynamicComponent>[] = [];

  constructor(private cfr: ComponentFactoryResolver, private vcr: ViewContainerRef) {}

  createDynamicComponent() {
    const factory = this.cfr.resolveComponentFactory(YourDynamicComponent);
    // 创建组件时拿到ComponentRef，里面就有实例
    const componentRef = this.vcr.createComponent(factory);
    const componentInstance = componentRef.instance;
    
    // 保存引用，后续操作全靠它
    this.activeComponentRefs.push(componentRef);

    // 直接调用组件方法，完全没问题
    componentInstance.yourCustomMethod();
  }

  deleteComponent(index: number) {
    const targetRef = this.activeComponentRefs[index];
    // 先销毁组件
    targetRef.destroy();
    // 再从列表移除，确保列表只留存活的
    this.activeComponentRefs.splice(index, 1);
  }

  operateOnAllActive() {
    // 遍历所有存活组件实例，执行操作或取数据
    this.activeComponentRefs.forEach(ref => {
      ref.instance.executeOperation();
      const componentData = ref.instance.componentData;
      // 处理数据...
    });
  }
}

如果你的动态组件是通过模板引用变量声明的，也可以用@ViewChildren配合read参数直接拿实例：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { YourDynamicComponent } from './your-dynamic.component';

export class ParentComponent {
  // 指定read参数为组件类，直接拿到实例列表
  @ViewChildren('dynamicComp', { read: YourDynamicComponent })
  dynamicComponents: QueryList<YourDynamicComponent>;

  ngAfterViewInit() {
    // QueryList是响应式的，组件删除后会自动更新
    this.dynamicComponents.forEach(component => {
      component.yourCustomMethod();
    });

    // 还能监听组件的添加/删除变化
    this.dynamicComponents.changes.subscribe(() => {
      console.log('组件列表更新了');
    });
  }
}

二、用RxJS实现响应式的组件数据收集 #

要是你不想直接持有组件引用，更倾向于响应式的方式获取所有存活组件的数据，可以让每个动态组件暴露自己的数据流，父组件合并这些流自动处理组件销毁：

1. 动态组件定义数据流 #

import { Component, OnDestroy } from '@angular/core';
import { BehaviorSubject, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class YourDynamicComponent implements OnDestroy {
  // 用BehaviorSubject保存当前数据，新订阅者能拿到最新值
  private dataSubject = new BehaviorSubject<YourDataType>(initialData);
  // 暴露给父组件的可观察对象（禁止外部直接修改）
  public data$ = this.dataSubject.asObservable();

  // 组件销毁信号
  private destroy$ = new Subject<void>();

  ngOnDestroy() {
    // 销毁时关闭数据流，通知父组件移除这个流
    this.dataSubject.complete();
    this.destroy$.next();
    this.destroy$.complete();
  }

  // 组件内部更新数据的方法
  updateData(newData: YourDataType) {
    this.dataSubject.next(newData);
  }
}

2. 父组件合并所有数据流 #

import { Component, ComponentFactoryResolver, ViewContainerRef, OnDestroy } from '@angular/core';
import { YourDynamicComponent } from './your-dynamic.component';
import { combineLatest, Observable, Subject } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';

export class ParentComponent implements OnDestroy {
  private componentDataStreams: Observable<YourDataType>[] = [];
  // 合并后的全量数据流，组件增删/数据更新都会自动推送最新数据
  public allActiveData$: Observable<YourDataType[]>;

  private parentDestroy$ = new Subject<void>();

  constructor(private cfr: ComponentFactoryResolver, private vcr: ViewContainerRef) {
    // 初始化合并流
    this.allActiveData$ = combineLatest(this.componentDataStreams).pipe(
      map(dataArray => dataArray.filter(Boolean)) // 过滤已销毁组件的无效数据
    );
  }

  createDynamicComponent() {
    const factory = this.cfr.resolveComponentFactory(YourDynamicComponent);
    const componentRef = this.vcr.createComponent(factory);
    const instance = componentRef.instance;

    // 把组件的数据流加入列表
    this.componentDataStreams.push(instance.data$);
    // 更新合并流
    this.allActiveData$ = combineLatest(this.componentDataStreams).pipe(
      map(dataArray => dataArray.filter(Boolean))
    );

    // 监听组件销毁，从流列表中移除对应的流
    instance.destroy$.pipe(
      takeUntil(this.parentDestroy$)
    ).subscribe(() => {
      const index = this.componentDataStreams.indexOf(instance.data$);
      if (index !== -1) {
        this.componentDataStreams.splice(index, 1);
        this.allActiveData$ = combineLatest(this.componentDataStreams).pipe(
          map(dataArray => dataArray.filter(Boolean))
        );
      }
    });
  }

  // 订阅合并流获取所有存活组件的数据
  fetchAllActiveData() {
    this.allActiveData$.subscribe(allData => {
      console.log('当前所有存活组件的数据：', allData);
      // 在这里执行你的批量操作
    });
  }

  ngOnDestroy() {
    this.parentDestroy$.next();
    this.parentDestroy$.complete();
  }
}

这种方式的好处是完全响应式，不用手动维护组件列表，组件的任何变化都会自动反映到数据流中，你只需要订阅allActiveData$就能拿到最新的全量数据。

内容的提问来源于stack exchange，提问作者bentona