如何在Angular Material Tree中条件性阻止分支折叠？

核心思路是通过控制节点展开状态+拦截折叠触发事件来实现需求，具体步骤如下：

1. 给节点数据添加错误状态标识 #

在你的节点数据模型中新增一个字段，用来标记该节点的子节点是否存在需修复的错误：

interface MyTreeNode {
  name: string;
  children?: MyTreeNode[];
  hasError: boolean; // 标记当前节点分支是否存在需修复的错误
}

2. 拦截折叠点击事件 #

在模板的折叠/展开按钮上添加事件拦截，判断当前节点是否满足禁止折叠的条件：

<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
  <li class="mat-tree-node">
    <button mat-icon-button
            [attr.disabled]="node.hasError ? true : null"
            (click)="handleNodeToggle($event, node)">
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.name}}
    <!-- 你的节点增删控件 -->
  </li>
</mat-tree-node>

3. 实现事件处理逻辑 #

在组件类中编写handleNodeToggle方法，当节点存在错误时阻止折叠动作：

handleNodeToggle(event: MouseEvent, node: MyTreeNode) {
  // 若节点分支存在错误，阻止折叠行为
  if (node.hasError) {
    event.stopPropagation();
    event.preventDefault();
    return;
  }
  // 正常切换节点展开/折叠状态
  this.treeControl.toggle(node);
}

4. 强制保持展开状态（可选） #

如果担心用户通过键盘等其他方式触发折叠，可监听treeControl的展开状态变化，当节点有错误时强制恢复展开：

ngOnInit() {
  this.treeControl.expansionModel.changed.subscribe(change => {
    change.removed.forEach(node => {
      const treeNode = node as MyTreeNode;
      if (treeNode.hasError) {
        this.treeControl.expand(treeNode);
      }
    });
  });
}

当node.hasError为true时：

• 折叠按钮会被禁用，给用户明确的视觉提示
• 点击按钮不会触发折叠动作
• 即使通过其他方式尝试折叠，也会被强制恢复展开状态

错误修复后，将node.hasError设为false，用户即可正常操作分支折叠。

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