Angular递归动态组件复选框父子选择状态联动问题

递归复选框组件只实现了父组件到子组件的状态单向下发（点击父级全选子项），缺失子组件到父组件的状态回传、逐层向上重算的链路，导致子项勾选状态变动后，父组件无法感知变化触发自身状态更新。之前尝试方案失败的核心是没有正确获取直接父级组件实例，错误尝试跨层级查找导致逻辑耦合。

• 依赖注入获取直接父组件实例：在递归组件的构造函数中，用Angular内置的@Host()、@Optional()装饰器注入当前组件自身类型的实例，即可拿到当前节点的直接父组件，根节点无父级时会返回空值，做好空判断即可，无需复杂的组件树查找逻辑。

  import { Component, Input, Optional, Host } from '@angular/core';
  
  @Component({
    selector: 'app-recursive-checkbox',
    templateUrl: './recursive-checkbox.component.html'
  })
  export class RecursiveCheckboxComponent {
    @Input() node: any;
    checked = false;
    // 子节点列表，根据自身业务数据结构赋值
    children: RecursiveCheckboxComponent[] = [];
  
    constructor(
      @Optional() @Host() private parentNode: RecursiveCheckboxComponent
    ) {}
  }
  

• 实现单节点状态自更新方法：单独封装当前节点的状态计算逻辑，遍历所有直接子节点的选中状态，所有子节点全选时当前节点设为选中，存在任意子节点未选中时当前节点设为未选中。如果需要支持半选效果，可额外判断是否存在部分子节点选中，给checkbox的indeterminate属性赋值即可。
• 实现状态向上冒泡逻辑：任意子节点状态变更触发当前节点重算后，如果存在父节点实例，自动调用父节点的状态更新方法，逐层向上传递直到根节点，形成完整的自下而上的更新链路。
• 修正复选框点击交互：点击当前节点复选框时，先切换自身选中状态，再把状态同步给所有下属子节点，最后触发向上冒泡通知父节点重算即可。

// 子节点注册到父节点，在ngAfterViewInit中根据自身数据结构收集子组件实例
ngAfterViewInit() {
  // 如果用@ViewChildren获取子组件实例，在这里赋值给this.children
}

// 子节点状态变更时触发的向上通知方法
notifyParentUpdate() {
  this.calculateSelfState();
  if (this.parentNode) {
    this.parentNode.notifyParentUpdate();
  }
}

// 计算当前节点自身选中状态
calculateSelfState() {
  if (!this.children.length) return;
  this.checked = this.children.every(child => child.checked);
}

// 点击当前复选框的事件处理
toggleCheck() {
  this.checked = !this.checked;
  // 向下同步状态到所有子节点
  this.children.forEach(child => {
    child.checked = this.checked;
  });
  // 向上通知父节点更新状态
  if (this.parentNode) {
    this.parentNode.notifyParentUpdate();
  }
}

模板中只需要给checkbox的change事件绑定toggleCheck()方法，不需要额外在子组件上手动传父级实例，依赖注入会自动完成父子实例的关联，不会出现找不到父组件的问题。

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