Angular父子组件调用报错：无法读取_inputElement属性，求解决方案

错误原因分析 #

• 模板引用变量缺失：父组件中@ViewChild('radioButton')对应的单选框，模板里没有添加#radioButton标识，导致matRadioButton实例为undefined。
• 私有属性滥用：_inputElement是Angular Material的私有内部属性（以下划线开头），直接访问会破坏封装性，且可能因版本更新失效。
• 组件交互逻辑冗余：手动触发MouseEvent完全没必要，MatRadioButton本身提供了官方API控制选中状态。

修复步骤 #

1. 确保父组件模板正确绑定单选框引用 #

在父组件的模板中，给MatRadioButton添加模板引用变量#radioButton：

<!-- 父组件模板 -->
<mat-radio-button #radioButton>目标单选框</mat-radio-button>
<app-child [radioChange]="callRadio"></app-child>

2. 替换私有属性，使用官方API控制单选框 #

修改父组件的callRadio方法，直接通过checked属性或toggle()方法控制单选框，替代手动触发DOM事件：

// 父组件代码
import { MatRadioButton } from '@angular/material/radio';
import { ViewChild } from '@angular/core';

export class ParentComponent {
  @ViewChild('radioButton', { static: false }) matRadioButton: MatRadioButton;

  callRadio() {
    this.service.onRadioChange();
    // 直接设置选中状态，替代手动触发事件
    this.matRadioButton.checked = true;
    // 或者使用toggle()方法切换选中状态
    // this.matRadioButton.toggle();
  }
}

3. 优化父子组件交互（可选） #

如果子组件只是触发父组件方法，更推荐用@Output事件绑定，避免直接传递方法：

// 子组件代码
import { Output, EventEmitter } from '@angular/core';

export class ChildComponent {
  @Output() radioChange = new EventEmitter<void>();

  onChildClick() {
    this.radioChange.emit();
  }
}

父组件模板修改为：

<app-child (radioChange)="callRadio()"></app-child>

关键注意事项 #

• 永远不要直接访问Angular库中以下划线开头的私有属性，这类属性不属于公开API，随时可能被修改。
• @ViewChild的static参数：如果单选框在静态模板中（不在*ngIf等结构指令内），可以设置为static: true，确保初始化时就能获取到实例。

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