如何获取Angular中动态加载的子组件实例？

静态添加的组件会在Angular初始化视图时被检测到，所以@ViewChild能正常获取实例；但动态加载的组件是在ngAfterViewInit之后才被插入DOM的，因此初始的@ViewChild查询会返回undefined。

以下是几种正确获取动态加载组件实例的方式：

• 方式一：创建组件时通过ComponentRef直接获取（Angular全版本适用）
  当使用ComponentFactoryResolver创建动态组件时，createComponent方法会返回ComponentRef对象，其instance属性就是动态组件的实例：

  import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
  import { ComponentType } from './path/to/component';
  
  constructor(
    private cfr: ComponentFactoryResolver,
    private vcr: ViewContainerRef
  ) {}
  
  loadDynamicComponent() {
    // 解析组件工厂
    const componentFactory = this.cfr.resolveComponentFactory(ComponentType);
    // 创建组件并获取ComponentRef
    const componentRef = this.vcr.createComponent(componentFactory);
    // 获取动态组件实例
    const dynamicCompInstance = componentRef.instance;
    
    // 可直接调用组件方法或访问属性
    dynamicCompInstance.someMethod();
    console.log('动态组件实例', dynamicCompInstance);
  }
  

• 方式二：Angular 13+简化版直接创建并获取实例
  Angular 13开始，ViewContainerRef的createComponent方法支持直接传入组件类，无需手动解析工厂，更简洁：

  import { ViewContainerRef } from '@angular/core';
  
  constructor(private vcr: ViewContainerRef) {}
  
  async loadDynamicComponent() {
    // 动态导入组件（按需加载场景）
    const { ComponentType } = await import('./path/to/component');
    // 创建组件并获取ComponentRef
    const componentRef = this.vcr.createComponent(ComponentType);
    // 获取实例
    const dynamicCompInstance = componentRef.instance;
    
    console.log('动态组件实例', dynamicCompInstance);
  }
  

• 方式三：监听QueryList变化被动获取实例
  如果无法在创建组件时直接捕获，可使用@ViewChildren监听组件列表的变化，当动态组件被添加后，就能拿到实例：

  import { ViewChildren, QueryList, AfterViewInit } from '@angular/core';
  import { ComponentType } from './path/to/component';
  
  export class ParentComponent implements AfterViewInit {
    @ViewChildren(ComponentType) dynamicComps!: QueryList<ComponentType>;
  
    ngAfterViewInit() {
      // 监听组件列表变化
      this.dynamicComps.changes.subscribe((updatedList) => {
        // 取最新添加的组件实例
        const latestInstance = updatedList.last;
        if (latestInstance) {
          console.log('动态组件实例', latestInstance);
        }
      });
    }
  }
  

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