Angular 5升级至13后@ViewChild及@Input值均为undefined求助

核心错误修复：父组件属性赋值错误 #

父组件ngOnInit中给item赋值时未使用this，导致类的item属性始终为undefined，子组件的@Input()自然无法获取到值：

ngOnInit(){
  console.log(this.headerSection)
  // 错误写法：创建局部变量，未给类属性赋值
  // item="abc"
  // 正确写法：
  this.item="abc"
}

@ViewChild返回undefined的排查与修复 #

1. 确认子组件的模块配置 #

Angular 13对子组件的模块声明要求严格，确保SidePanelHeaderSectionComponent已被正确配置：

• 声明在当前父组件所在NgModule的declarations数组中
• 若子组件在共享模块，需同时在共享模块的exports数组中导出，且父组件所在模块已导入该共享模块

2. 修正@ViewChild的set写法 #

你尝试的set形式@ViewChild存在语法错误，正确写法如下：

private headerSection: SidePanelHeaderSectionComponent;

@ViewChild('headerSection') set headerSectionSetter(sect: SidePanelHeaderSectionComponent) {
  if (sect) {
    this.headerSection = sect;
    // 在此可安全操作子组件实例
    console.log(this.headerSection);
  }
}

注意：setter需要指定变量名（如headerSectionSetter），不能直接写set(sect: ...)。

3. 排查条件渲染影响 #

检查父组件模板中app-side-panel-header是否被*ngIf、*ngSwitchCase等条件指令包裹，若有需确保条件为true时组件才会渲染，@ViewChild才能获取到实例。

4. 遵循生命周期机制 #

@ViewChild（static: false）的实例仅会在ngAfterViewInit及之后的钩子中可用，ngOnInit中必然是undefined，这是Angular的生命周期规则，无需在ngOnInit中验证。

验证步骤 #

1. 修复父组件的this.item赋值错误
2. 修正模块中子组件的声明/导出配置
3. 使用正确的set形式@ViewChild，或在ngAfterViewInit中访问子组件实例
4. 运行项目后，子组件ngOnInit应打印出"abc"，父组件可正常获取子组件实例

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