Angular15跨组件复选框取消选中状态失效问题求助

问题根源 #

1. 子组件用[(ngModel)]双向绑定复选框状态，但仅通过@Input()接收父组件值，没有将子组件的状态变更同步回父组件，导致父组件无法感知用户手动勾选的状态。
2. 父组件每次点击菜单都设置SelectionChange = false，但如果当前SelectionChange已经是false，Angular变更检测不会触发子组件更新（因为输入值未发生变化）。
3. 初始状态矛盾：子组件isChecked默认值为true，但父组件SelectionChange初始为false，会覆盖子组件默认值，不符合“复选框默认选中”的需求。

解决方案 #

给子组件添加双向绑定支持，确保父子组件状态双向同步；修正初始状态值，保证每次菜单点击都能触发复选框状态更新。

修改后的代码 #

子组件（selectionpage.component.ts）

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

@Component({
  selector: 'app-selectionpage',
  templateUrl: './selectionpage.component.html',
  styleUrls: ['./selectionpage.component.scss']
})
export class SelectionpageComponent {
  private _isChecked: boolean = true;

  // 定义双向绑定的Input属性
  @Input() 
  get isChecked(): boolean {
    return this._isChecked;
  }
  set isChecked(value: boolean) {
    this._isChecked = value;
    // 状态变更时发射事件同步到父组件
    this.isCheckedChange.emit(this._isChecked);
  }

  // 双向绑定对应的Output事件
  @Output() isCheckedChange = new EventEmitter<boolean>();
}

子组件模板（selectionpage.component.html）

<p>Check Box Selection!</p>
<input type="checkbox" [(ngModel)]="isChecked">Select All

父组件（display-page.component.ts）

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

@Component({
  selector: 'app-display-page',
  templateUrl: './display-page.component.html',
  styleUrls: ['./display-page.component.scss'],
})
export class DisplayPageComponent {
  public selectionContent: Array<string> = [
    'User',
    'Admin',
    'SuperAdmin',
    'Seller',
  ];
  // 初始设为true，满足复选框默认选中需求
  public SelectionChange: boolean = true;

  changerArchiveType() {
    this.SelectionChange = false;
    console.log("Checked:", this.SelectionChange)
  }
}

父组件模板（display-page.component.html）

<div class="tab-menu-container">
  <div class="tab-menu-wrapper">
    <ng-container *ngFor="let selectvalue of selectionContent">
      <div class="tab">
        <span (click)="changerArchiveType()" style="cursor: pointer;">{{ selectvalue }}</span>|
      </div>
    </ng-container>
  </div>
</div>
<!-- 使用双向绑定语法，同步父子组件状态 -->
<app-selectionpage [(isChecked)]="SelectionChange"></app-selectionpage>

说明 #

• 子组件通过get/set结合@Output()实现双向绑定，当用户手动勾选复选框时，会自动将新状态同步到父组件的SelectionChange。
• 父组件点击菜单时设置SelectionChange = false，无论当前状态是什么，只要值发生变化（比如用户手动勾选为true后），Angular都会触发变更检测，强制更新子组件的复选框状态。
• 初始SelectionChange设为true，确保复选框默认处于选中状态，符合需求。

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