Angular手风琴组件如何实现子项状态变更时自动同步全选状态

实现方案 #

首先先修正你现有代码里的一个笔误：toggleAll方法中this.accordionAll1 = !this.accordionAll属于多余的错误代码，直接删除即可。

要实现全选状态和单个手风琴状态的自动同步，最简单的方案是用Angular的getter属性来自动计算accordionAll的状态，不需要手动维护值，变更检测会自动更新状态。

1. 组件类代码修改

推荐先将单个手风琴状态改为数组存储，后续新增手风琴不需要额外声明变量，扩展性更好：

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

@Component({
  selector: 'app-myApp',
  templateUrl: './my-app.component.html',
  styleUrls: ['./my-app.component.scss']
})
export class MyApp implements OnInit {
  // 存储所有子手风琴的状态，初始默认全关
  accordions: boolean[] = [false, false, false];

  // 自动计算全选状态：所有子手风琴全开启时返回true，否则返回false
  get accordionAll(): boolean {
    return this.accordions.every(state => state === true);
  }

  constructor() { }

  ngOnInit() {
  }

  // 全选切换逻辑
  toggleAll(): void {
    const targetState = !this.accordionAll;
    this.accordions = this.accordions.map(() => targetState);
  }

  // 单个手风琴切换逻辑
  toggleSingle(index: number): void {
    this.accordions[index] = !this.accordions[index];
  }
}

如果你不想修改原有三个单独变量的声明方式，也可以直接修改accordionAll为getter即可：

// 保留原有三个变量的写法
accordion1: boolean;
accordion2: boolean;
accordion3: boolean;

get accordionAll(): boolean {
  return this.accordion1 && this.accordion2 && this.accordion3;
}

toggleAll(): void {
  const targetState = !this.accordionAll;
  this.accordion1 = targetState;
  this.accordion2 = targetState;
  this.accordion3 = targetState;
}

这种写法下哪怕你保留模板里直接修改accordion1 = !accordion1的逻辑，accordionAll也会自动同步状态，不需要额外修改。

2. 模板代码修改

如果采用数组存储状态，对应修改单个手风琴的绑定逻辑即可：

<!-- 三个手风琴依次绑定对应索引 -->
<div (click)="toggleSingle(0)" [ngClass]="accordions[0] ? 'is-active' : ''"></div>
<div (click)="toggleSingle(1)" [ngClass]="accordions[1] ? 'is-active' : ''"></div>
<div (click)="toggleSingle(2)" [ngClass]="accordions[2] ? 'is-active' : ''"></div>

全选按钮的代码不需要修改，保持原有写法即可：

<div (click)="toggleAll()" [ngClass]="accordionAll ? 'is-active' : ''"></div>

该方案的核心逻辑是通过getter将accordionAll变成派生状态，完全由子手风琴的状态计算得出，不需要手动赋值，自然不会出现状态不同步的问题。

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