Angular2 多级复选框绑定：层级多选组件实现技术问询

嘿，我懂你想要的这种层级多选组件的逻辑，而且想从Angular核心概念层面搞明白，不想直接抄那些复杂的解决方案对吧？我来给你一步步拆解清楚～

第一步：先改造数据模型，添加选中状态 #

你原来的options只是纯数据结构，但每个节点（不管是父还是子）都需要跟踪「是否被选中」的状态，所以我们得给每个节点加个checked属性。改造后的模型大概是这样：

// 先定义一个类型，让结构更清晰
interface SelectOption {
  name: string;
  checked: boolean;
  children?: SelectOption[]; // 父节点才有子节点
}

// 初始化你的选项数据
options: SelectOption[] = [
  {
    name: "Food",
    checked: false,
    children: [
      { name: "Bacon", checked: false },
      { name: "Waffles", checked: false }
    ]
  },
  {
    name: "Cars",
    checked: false,
    children: [
      { name: "Matchbox", checked: false },
      { name: "Ford", checked: false }
    ]
  }
];

这样每个节点的选中状态都能被Angular的双向绑定实时追踪到。

第二步：处理父节点的选中/取消逻辑 #

当你勾选父节点（比如Food）时，它的所有子节点必须自动选中；取消父节点时，所有子节点也跟着取消。在Angular里，我们可以写一个方法来处理这个同步：

toggleParent(option: SelectOption): void {
  // 只有父节点才有children，先判断一下
  if (option.children) {
    // 遍历所有子节点，把它们的checked状态和父节点同步
    option.children.forEach(child => {
      child.checked = option.checked;
    });
  }
}

然后在模板里，给父节点的复选框绑定[(ngModel)]到option.checked，并在状态变化时触发这个方法：

<!-- 遍历所有父节点 -->
<div *ngFor="let option of options">
  <label>
    <input 
      type="checkbox" 
      [(ngModel)]="option.checked" 
      (change)="toggleParent(option)"
    >
    {{ option.name }}
  </label>
  <!-- 子节点的部分后面说 -->
</div>

第三步：处理子节点的选中/取消逻辑 #

这是你需求里最核心的部分：取消某个子节点（比如Waffles）时，父节点要自动取消，但其他子节点（比如Bacon）保持选中状态。逻辑是这样的：

• 当子节点状态变化时，检查它的所有兄弟节点是否都被选中
• 如果全部选中，父节点设为「选中」；只要有一个没选中，父节点就设为「未选中」

我们写一个方法来实现这个逻辑：

toggleChild(child: SelectOption, parent: SelectOption): void {
  if (!parent.children) return;
  
  // 检查父节点下的所有子节点是否都被选中
  const allChildrenChecked = parent.children.every(c => c.checked);
  // 更新父节点的选中状态
  parent.checked = allChildrenChecked;
}

然后在模板里嵌套循环渲染子节点，绑定状态并触发方法：

<div *ngFor="let option of options" style="margin-left: 10px;">
  <label>
    <input 
      type="checkbox" 
      [(ngModel)]="option.checked" 
      (change)="toggleParent(option)"
    >
    {{ option.name }}
  </label>
  <!-- 如果有子节点，渲染子节点列表 -->
  <div *ngIf="option.children" style="margin-left: 25px;">
    <div *ngFor="let child of option.children">
      <label>
        <input 
          type="checkbox" 
          [(ngModel)]="child.checked" 
          (change)="toggleChild(child, option)"
        >
        {{ child.name }}
      </label>
    </div>
  </div>
</div>

第四步：搞懂背后的Angular核心概念 #

其实这个实现就是用了Angular几个最基础但核心的功能：

• 双向数据绑定（[(ngModel)]）：让复选框的UI状态和模型里的checked属性实时同步，不用你手动去DOM里取值或者改DOM。
• 事件绑定（(change)）：当用户点击复选框改变状态时，自动触发我们写的逻辑方法，处理父子节点的状态同步。
• 变更检测：只要模型里的checked属性变了，Angular会自动更新模板里的复选框状态，不用你手动操作DOM。

可选优化：初始状态同步 #

如果你的初始数据里有些子节点是默认选中的，那父节点应该自动显示为选中状态。可以在组件初始化的时候跑一遍检查：

ngOnInit(): void {
  this.options.forEach(option => {
    if (option.children) {
      // 初始化时检查所有子节点是否都选中，同步父节点状态
      option.checked = option.children.every(c => c.checked);
    }
  });
}

这样就完全实现了你要的逻辑：选中Food时，Bacon和Waffles自动选中；取消Waffles时，Food变成未选中，但Bacon保持选中～

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