Angular Material Tree初始节点未折叠问题求助

问题根源 #

你的代码存在两个核心问题导致节点无法正确折叠：

1. 仅处理了根节点：原代码只遍历根节点调用collapse方法，嵌套的子节点（如Green、Orange）未被处理，它们的子节点仍会显示
2. 缺少隐藏子节点的CSS样式：[class.example-tree-invisible]="!treeControl.isExpanded(node)"绑定的样式未定义，即使TreeControl标记节点为折叠，DOM元素也不会被隐藏

解决方案 #

1. 添加必要的CSS样式

在app.component.css中添加以下样式，确保折叠状态下子节点隐藏：

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

.example-tree ul,
.example-tree li {
  margin-top: 0;
  margin-bottom: 0;
  list-style-type: none;
}

同时给<mat-tree>标签添加example-tree类：

<mat-tree class="example-tree" [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- 其余代码不变 -->
</mat-tree>

2. 递归折叠所有层级节点

修改app.component.ts中的ngOnInit方法，递归遍历所有节点并调用折叠方法：

ngOnInit() {
  this.dataSource.data = TREE_DATA;
  
  // 递归折叠所有层级的节点
  const collapseAllNodes = (nodes: Category[]) => {
    nodes.forEach(node => {
      this.treeControl.collapse(node);
      // 递归处理子节点
      if (node.children?.length) {
        collapseAllNodes(node.children);
      }
    });
  };

  collapseAllNodes(this.dataSource.data);
}

补充说明 #

• NestedTreeControl默认所有节点初始状态为折叠，但如果业务场景存在默认展开的节点，或者需要确保100%折叠，递归处理是最可靠的方式
• 若仍想在ngAfterViewInit中调用，只需将递归折叠逻辑移至该钩子即可，效果一致

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