Angular中如何将单选按钮值传递至父组件？

1. 修正子组件@Output事件触发逻辑 #

子组件需在单选按钮状态变化时主动触发输出事件，更新代码如下：

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  selectedVal: string;
  @Output() valChanged = new EventEmitter<string>();

  onRadioChange() {
    this.valChanged.emit(this.selectedVal);
  }
}

2. 调整子组件模板的单选按钮绑定 #

将Angular Material单选组与ngModel绑定，并关联change事件触发传值方法：

<!-- child.component.html -->
<mat-radio-group [(ngModel)]="selectedVal" (change)="onRadioChange()">
  <mat-radio-button value="opt1">选项1</mat-radio-button>
  <mat-radio-button value="opt2">选项2</mat-radio-button>
</mat-radio-group>

3. 父组件接收值并实现内容切换 #

父组件监听子组件的输出事件，存储选中值后通过*ngIf切换展示内容：

<!-- 父组件模板 -->
<app-child (valChanged)="updateSelectedOpt($event)"></app-child>

<div *ngIf="currentOpt === 'opt1'">
  选项1对应的展示内容
</div>
<div *ngIf="currentOpt === 'opt2'">
  选项2对应的展示内容
</div>

// 父组件ts文件
currentOpt: string;

updateSelectedOpt(val: string) {
  this.currentOpt = val;
}

4. 排查基础配置问题 #

• 确认FormsModule和MatRadioModule已导入到对应NgModule中，这是表单与Material单选按钮正常工作的前提。
• 检查子组件是否已在父组件所属模块中声明，避免组件未识别错误。
• 确保单选按钮的value属性值与绑定变量类型一致，防止类型不匹配导致ngModel失效。

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