Angular中如何在父组件ngOnInit阶段访问并监听子组件变量

根因说明 #

Angular 生命周期中ngOnInit执行时，子组件尚未完成初始化、对应的DOM节点也未完成渲染，因此默认配置下的@ViewChild查询结果此时还未赋值，获取到的就是undefined，这是框架的正常设计。你之前尝试直接订阅this.test.model.test1失败的核心原因是：执行订阅逻辑时this.test本身是undefined，访问属性会直接抛出异常，根本无法拿到待订阅的对象。

可行方案 #

方案1：将逻辑迁移到ngAfterViewInit钩子（最推荐） #

ngAfterViewInit钩子会在所有子组件、子视图初始化完成后触发，此时@ViewChild查询的子组件实例已经完全可用，不需要额外的等待逻辑：

@ViewChild("test") test;

ngAfterViewInit() {
  // 此处test已经完成初始化，可以直接访问内部属性
  console.log(this.test.model.test1);
  // 你的后续业务逻辑直接写在这里即可
}

如果执行逻辑时会修改父组件传递给子组件的输入属性，为了避免单向数据流报错，可以用setTimeout包裹逻辑，或者注入ChangeDetectorRef手动触发变更检测。

方案2：给@ViewChild添加static配置（Angular 8+适用，仅非条件渲染场景可用） #

如果你的子组件没有被*ngIf、*ngSwitch等结构指令条件渲染，可以给@ViewChild添加static: true配置，让Angular在变更检测前就完成子组件查询赋值，这样ngOnInit中就可以直接拿到子组件实例：

// 仅子组件始终渲染、没有被条件控制时可使用该配置
@ViewChild("test", { static: true }) test;

ngOnInit() {
  console.log(this.test.model.test1);
  // 后续逻辑
}

方案3：ngOnInit内轮询等待子组件加载（仅特殊场景使用） #

如果你的业务逻辑必须在ngOnInit阶段发起，且子组件是条件渲染的，可以用RxJS的定时查询等待子组件实例加载完成：

import { timer } from 'rxjs';
import { filter, first } from 'rxjs/operators';

@ViewChild("test") test;

ngOnInit() {
  // 每100ms检查一次子组件是否加载完成，拿到后只执行一次
  timer(0, 100).pipe(
    filter(() => !!this.test?.model?.test1),
    first()
  ).subscribe(() => {
    console.log(this.test.model.test1);
    // 你的后续业务逻辑
  })
}

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