Angular中实现单选框勾选时启用Ajouter按钮的方案咨询

核心思路 #

用**父子组件通信（@Input + @Output）**实现状态传递：单选框组件将「是否有选中项」的状态传递给父组件，父组件再把这个状态传给按钮组件，控制按钮的禁用/启用状态。这种方式逻辑直观，适合Angular新手理解。

步骤1：改造单选框组件（SafeBoxRadioComponent） #

这个组件负责监听单选框的选中状态，并向外发送状态变化事件。

组件TS代码

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

@Component({
  selector: 'app-safe-box-radio',
  templateUrl: './safe-box-radio.component.html'
})
export class SafeBoxRadioComponent {
  // 存储选中的单选框对应的数据
  selectedItem: any;
  // 定义输出事件，向父组件传递选中状态
  @Output() hasSelected = new EventEmitter<boolean>();

  // 单选框状态变化时触发
  onRadioStatusChange() {
    // 判断是否有选中项（只要selectedItem存在就说明有选中）
    const hasSelection = !!this.selectedItem;
    // 把状态传给父组件
    this.hasSelected.emit(hasSelection);
  }
}

组件HTML代码

结合p-tableRadioButton的特性，用ngModel绑定选中项，同时监听onChange事件：

<p-table [value]="yourSafeBoxDataList"> <!-- 替换成你的保险箱数据列表 -->
  <ng-template pTemplate="body" let-item>
    <tr>
      <td>
        <p-tableRadioButton 
          [value]="item" 
          [(ngModel)]="selectedItem" 
          (onChange)="onRadioStatusChange()"
        ></p-tableRadioButton>
      </td>
      <td>{{item.name}}</td> <!-- 替换成你的数据字段 -->
    </tr>
  </ng-template>
</p-table>

步骤2：改造按钮组件（AddButtonComponent） #

这个组件接收父组件传递的状态，控制按钮的禁用状态。

组件TS代码

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

@Component({
  selector: 'app-add-button',
  templateUrl: './add-button.component.html'
})
export class AddButtonComponent {
  // 定义输入属性，接收父组件传来的启用状态
  @Input() isButtonEnabled = false;
}

组件HTML代码

把disabled属性和输入状态绑定：

<button 
  type="button"
  [disabled]="!isButtonEnabled"
>
  Ajouter
</button>

步骤3：父组件中转状态 #

在两个子组件的父组件（比如PageComponent）中，连接单选框的输出事件和按钮的输入属性。

父组件TS代码

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

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html'
})
export class PageComponent {
  // 存储单选框的选中状态
  isSafeBoxSelected = false;

  // 接收单选框组件传来的状态变化
  updateSelectionStatus(status: boolean) {
    this.isSafeBoxSelected = status;
  }
}

父组件HTML代码

引入两个子组件，完成状态传递绑定：

<!-- 保险箱单选框区域 -->
<div class="safe-box-area">
  <app-safe-box-radio (hasSelected)="updateSelectionStatus($event)"></app-safe-box-radio>
</div>

<!-- 按钮区域 -->
<div class="button-area">
  <app-add-button [isButtonEnabled]="isSafeBoxSelected"></app-add-button>
</div>

补充说明 #

• 你之前想的「遍历单选框设置状态标记」思路，其实已经被p-tableRadioButton的ngModel简化了——它会自动维护选中项，不需要手动遍历所有单选框，只要判断selectedItem是否存在即可。
• 如果两个组件不是直接父子关系（比如是同级组件），父组件中转依然是最容易上手的方案；如果场景更复杂，再考虑用Angular服务做状态共享。

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