Angular 7：组件拆分场景下如何通过单选按钮仅改变选中Div背景

这个问题的核心在于选中状态的管理范围不对：你现在每个news.component实例都维护着自己的idSelected变量，这就导致点击某个单选按钮时，只有当前组件的状态会更新，但因为你希望是单选（全局仅一个选中项），所以选中状态应该交给父组件（home.component）统一管理，子组件只负责接收自己是否被选中的状态，并触发选中事件通知父组件。

下面是具体的修改步骤：

1. 父组件（home.component）统一管理选中状态 #

首先在父组件中添加选中ID的变量和处理选中事件的方法：

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  contentNews = [
    { "idcontentnew":1, "title":"Productos" },
    { "idcontentnew":2, "title":"Servicios" }
  ];
  // 存储当前选中的新闻ID
  selectedNewsId: number | null = null;

  // 处理子组件传来的选中事件
  onNewsSelected(id: number) {
    this.selectedNewsId = id;
  }
}

然后更新父组件模板，把选中状态传递给子组件，并绑定选中事件：

<!-- home.component.html -->
<form #fNews="ngForm">
  <app-news 
    *ngFor="let data of contentNews" 
    [data]="data"
    [isSelected]="data.idcontentnew === selectedNewsId"
    (newsSelected)="onNewsSelected($event)"
  ></app-news>
</form>

2. 修改子组件（news.component），移除独立状态，改为接收和触发事件 #

子组件不再维护自己的idSelected，而是通过@Input接收是否被选中的状态，通过@Output触发选中事件：

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

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
})
export class NewsComponent {
  @Input("data") data: any;
  // 接收父组件传来的是否选中的状态
  @Input() isSelected: boolean = false;
  // 向父组件发送选中事件
  @Output() newsSelected = new EventEmitter<number>();

  constructor() {}

  // 点击时触发事件通知父组件
  selected(id: number) {
    this.newsSelected.emit(id);
  }
}

最后更新子组件模板，用父组件传来的isSelected判断样式，同时修正单选按钮的状态绑定：

<!-- news.component.html -->
<div class="row">
  <!-- 用父组件传来的isSelected判断样式 -->
  <div class="col-md-12 col-xl-12 col-sm-12" [ngClass]="{'divSelected': isSelected}">
    <div class="form-group">
      <input 
        type="radio" 
        id="inputIdNew{{data.idcontentnew}}" 
        name="inputIdNew" 
        (click)="selected(data.idcontentnew)"
        <!-- 绑定checked属性，确保单选按钮状态与选中状态同步 -->
        [checked]="isSelected"
      />
      <label for="inputIdNew{{data.idcontentnew}}">Select new</label>
    </div>
    <div class="form-group">
      <input 
        id="inputTitle{{data.idcontentnew}}" 
        name="inputTitle{{data.idcontentnew}}" 
        type="text" 
        [value]="data.title" 
      />
    </div>
  </div>
</div>

为什么原来的方案会出问题？ #

你之前的实现中，每个app-news组件都有自己的idSelected变量，当点击某个组件的单选按钮时，只有该组件的idSelected会被设置为对应ID，但其他组件的idSelected仍然是null。同时，单选按钮的name属性相同但属于不同组件的表单上下文，导致NgForm的状态混乱，最终出现所有Div背景变化的异常。

把选中状态提升到父组件后，所有子组件的选中状态都由同一个变量控制，就能保证全局只有一个选中项，对应的Div才会改变背景，完美契合你拆分组件的需求。

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