复用含单选按钮组的Angular组件时状态共享问题求助

这个问题我之前碰过好多次啦，核心原因有两个：一是浏览器会把相同name属性的单选按钮默认归为同一组，导致选中状态在实例间共享；二是你代码里用的是单向绑定[ngModel]，没法正确同步组件内部的状态。咱们一步步来修复：

步骤1：给子组件添加唯一组名的输入属性 #

首先在app-radiobutton-form组件的TS文件里，新增一个@Input()属性，用来接收父组件传递的唯一组名，确保每个实例的单选按钮组是独立的：

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

@Component({
  selector: 'app-radiobutton-form',
  templateUrl: './radiobutton-form.component.html'
})
export class RadiobuttonFormComponent {
  @Input() groupName: string = 'default-approval-group'; // 默认值兜底
  isApproved: boolean = false; // 每个实例独立维护的状态
}

步骤2：修改子组件HTML，绑定唯一组名和双向ngModel #

把单选按钮的name属性绑定到刚才的groupName，同时把单向绑定[ngModel]改成双向绑定[(ngModel)]，确保选中状态能正确同步到组件内部的isApproved：

<div class="form-inline">
  <div class="form-group">
    <label>all items are approved</label>
    <input 
      [value]="true" 
      type="radio" 
      [name]="groupName" 
      [(ngModel)]="isApproved">
  </div>
  <div class="form-group">
    <label>items are not approved</label>
    <input 
      [value]="false" 
      type="radio" 
      [name]="groupName" 
      [(ngModel)]="isApproved">
  </div>
</div>

步骤3：父组件复用时分发唯一组名 #

在app-sample-container的HTML里，给每个app-radiobutton-form实例传递不同的groupName值，彻底隔离各个单选按钮组：

<!-- 第一个实例 -->
<app-radiobutton-form [groupName]="'approval-group-1'"></app-radiobutton-form>

<!-- 第二个实例 -->
<app-radiobutton-form [groupName]="'approval-group-2'"></app-radiobutton-form>

<!-- 可以继续添加更多实例，只要groupName唯一就行 -->

可选：同步状态到父组件 #

如果你需要把每个实例的选中状态同步回父组件，可以给子组件添加@Output()事件，实现自定义双向绑定：

子组件TS修改： #

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-radiobutton-form',
  templateUrl: './radiobutton-form.component.html'
})
export class RadiobuttonFormComponent {
  @Input() groupName: string = 'default-approval-group';
  @Input() get approvalStatus(): boolean {
    return this.isApproved;
  }
  set approvalStatus(value: boolean) {
    this.isApproved = value;
    this.approvalChange.emit(value);
  }
  @Output() approvalChange = new EventEmitter<boolean>();

  private isApproved: boolean = false;
}

父组件使用自定义双向绑定： #

<app-radiobutton-form 
  [groupName]="'approval-group-1'"
  [(approvalStatus)]="parentApprovalStatus1">
</app-radiobutton-form>

<app-radiobutton-form 
  [groupName]="'approval-group-2'"
  [(approvalStatus)]="parentApprovalStatus2">
</app-radiobutton-form>

这样父组件里的parentApprovalStatus1和parentApprovalStatus2就能分别对应两个子组件的选中状态啦～

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