Angular中组件无法获取另一组件变量问题求助

问题分析 #

你的AppComponent通过@ViewChild尝试获取InnerComponent实例，但在ngAfterViewInit中打印时显示undefined，核心原因通常是以下几种：

• AppComponent的模板中未添加InnerComponent的渲染标签
• InnerComponent被*ngIf这类结构指令包裹，导致ngAfterViewInit执行时子组件还未完成初始化
• @ViewChild的静态配置与当前生命周期需求不匹配

解决方案 #

1. 确保模板中存在子组件标签 #

打开app.component.html，添加InnerComponent的选择器标签，这是@ViewChild能获取到实例的前提：

<app-inner></app-inner>

2. 调整@ViewChild的静态配置（按需选择） #

Angular 8+版本中@ViewChild的static属性默认值为false，适合在ngAfterViewInit中访问子组件；如果需要在ngOnInit中获取，则需显式设置static: true：

@ViewChild(InnerComponent, { static: false }) innerComponent: InnerComponent;

3. 处理结构指令包裹的场景（若存在） #

如果InnerComponent被*ngIf包裹，可改用@ViewChildren监听组件实例的变化，确保在组件渲染完成后再访问：

import { AfterViewInit, Component, ViewChildren, QueryList } from '@angular/core';
import { InnerComponent } from './inner/inner.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChildren(InnerComponent) innerComponents: QueryList<InnerComponent>;

  ngAfterViewInit() {
    this.innerComponents.changes.subscribe(components => {
      if (components.length > 0) {
        console.log(components.first.a);
      }
    });
  }
}

修正后的完整代码 #

AppComponent

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { InnerComponent } from './inner/inner.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild(InnerComponent) innerComponent: InnerComponent;

  ngAfterViewInit() {
    console.log(this.innerComponent.a); // 成功打印200
  }
}

app.component.html

<app-inner></app-inner>

InnerComponent

import { Component } from '@angular/core';

@Component({
  selector: 'app-inner',
  templateUrl: './inner.component.html',
  styleUrls: ['./inner.component.css'],
})
export class InnerComponent {
  a = 200;
}

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