Angular Material嵌套树懒加载子节点无法渲染问题排查

核心问题分析 #

1. 模板节点定义冲突：模板中同时给带toggle按钮的mat-tree-node和子节点容器mat-nested-tree-node设置了when: hasChild条件，导致Angular无法正确区分节点渲染逻辑，子节点无法挂载到matTreeNodeOutlet中。
2. 节点状态未更新：加载子节点后，原节点的child标识未清除，hasChild函数的判断逻辑持续认为节点处于“待加载子节点”状态，干扰树控件的渲染判断。

具体修复步骤 #

1. 修正模板结构 #

调整模板中节点定义的when条件，明确区分节点内容和子节点容器的渲染逻辑：

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- 有子节点/待加载子节点的节点内容 -->
  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
    <button mat-icon-button (click)="loadChildren(node)">
      <mat-icon>{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}</mat-icon>
    </button>
    {{node.name}}
  </mat-tree-node>

  <!-- 子节点容器：仅当节点已加载子节点时渲染 -->
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasLoadedChild">
    <div [class.example-tree-invisible]="!treeControl.isExpanded(node)">
      <ng-container matTreeNodeOutlet></ng-container>
    </div>
  </mat-nested-tree-node>

  <!-- 叶子节点 -->
  <mat-tree-node *matTreeNodeDef="let node; when: isLeafNode">
    {{node.name}}
  </mat-tree-node>
</mat-tree>

2. 补充并修正节点状态判断函数 #

在组件类中新增hasLoadedChild函数，同时修正hasChild和loadChildren逻辑：

// 新增：判断节点是否已加载子节点
hasLoadedChild = (_: number, node: Region) => !!node.children && node.children.length > 0;

// 修正：判断节点是否有子节点（包括待加载状态）
hasChild = (_: number, node: Region) => (!!node.children && node.children.length > 0) || node.child;

// 修正：加载子节点后清除child标识并触发展开
loadChildren(node: Region) {
  this.treeData = this.apiService.getChildrenById(node.id, stateData);
  node.children = [...this.treeData];
  // 清除待加载标识
  node.child = false;
  // 触发数据源变更检测
  this.dataSource.data = [...this.dataSource.data];
  // 自动展开节点显示子节点
  this.treeControl.expand(node);
}

3. 补充必要样式（可选） #

如果未定义example-tree-invisible样式，添加如下CSS：

.example-tree-invisible {
  display: none;
}

修复原理说明 #

• 拆分节点内容和子节点容器的渲染条件后，Angular能正确识别需要渲染子节点出口的节点，加载后的子节点会被正确挂载到matTreeNodeOutlet中。
• 清除node.child标识后，hasChild函数的判断逻辑切换为基于真实children数组的判断，避免状态混乱。
• 调用treeControl.expand(node)确保加载子节点后自动展开节点，无需用户二次操作。

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