Angular 12中如何从动态创建的组件访问子组件？

可以访问，核心思路是通过动态创建的ParentComponent实例，间接获取其内部的child-component引用，具体步骤如下：

• 第一步：在ParentComponent中暴露child-component引用
  在ParentComponent里，用@ViewChild装饰器获取模板中标记为#childCmp的子组件实例，并将其公开（直接作为类属性即可）：

  import { Component, ViewChild, AfterViewInit } from '@angular/core';
  import { ChildComponent } from './child.component';
  
  @Component({
    selector: 'parent-component',
    template: '<child-component #childCmp></child-component>'
  })
  export class ParentComponent implements AfterViewInit {
    // 公开child-component实例
    @ViewChild('childCmp') childCmp!: ChildComponent;
  
    ngAfterViewInit() {
      // 此时childCmp已完成初始化
    }
  }
  

• 第二步：在global-component中通过ParentComponent实例访问
  动态创建ParentComponent后，component.instance就是ParentComponent的实例，直接通过该实例访问childCmp属性即可。注意要确保ParentComponent的视图已初始化，避免获取到undefined：

  const comFactory = this.resolver.resolveComponentFactory(ParentComponent);
  const component: any = this.componentContainer.createComponent(comFactory);
  
  // 方式1：利用ParentComponent的AfterViewInit钩子
  component.instance.ngAfterViewInit = () => {
    const childComponent = component.instance.childCmp;
    // 在这里操作childComponent，比如调用其方法、修改属性
    childComponent.someMethod();
  };
  
  // 方式2：使用setTimeout（简单但不够严谨，适合快速测试）
  setTimeout(() => {
    const childComponent = component.instance.childCmp;
    // 执行操作
  }, 0);
  

注意事项 #

• 确保ParentComponent中的childCmp属性是可访问的（不要用private修饰）；
• 如果child-component内部还有更深层级的子组件，同样可以通过childComponent实例继续用@ViewChild获取，以此类推。

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