如何在Angular Material Tree中展开指定节点？

嘿，我刚好处理过类似的需求，其实Angular Material的MatTree确实支持单独展开某个节点的操作，只是相关方法不在节点对象本身，而是由TreeControl（也就是你初始化树时用到的FlatTreeControl或NestedTreeControl）提供的，这可能是你看文档时没注意到的点~

下面分两种常见的树类型给你具体的实现步骤：

1. 扁平树（Flat Tree）场景 #

假设你用的是MatTreeFlatDataSource，首先确保组件里已经初始化了FlatTreeControl：

import { FlatTreeControl } from '@angular/material/tree';

// 假设你的扁平节点类型是ExampleFlatNode
treeControl = new FlatTreeControl<ExampleFlatNode>(
  node => node.level, // 节点层级获取函数
  node => node.expandable // 判断节点是否可展开的函数
);

接下来，给节点添加点击事件，调用TreeControl的expand()方法就能单独展开目标节点了：

// 组件里的展开节点方法
expandTargetNode(node: ExampleFlatNode) {
  // 可以先判断节点是否可展开，避免无效操作
  if (this.treeControl.isExpandable(node)) {
    this.treeControl.expand(node);
  }
}

模板里绑定点击事件：

<mat-tree-node (click)="expandTargetNode(node)" *matTreeNodeDef="let node">
  <div class="tree-node-content">
    <!-- 你的节点内容，比如图标、文本 -->
    {{node.name}}
  </div>
</mat-tree-node>

2. 嵌套树（Nested Tree）场景 #

如果是MatTreeNestedDataSource，对应的NestedTreeControl用法类似：

import { NestedTreeControl } from '@angular/material/tree';

// 假设你的嵌套节点类型是ExampleNestedNode
treeControl = new NestedTreeControl<ExampleNestedNode>(node => node.children);

// 展开节点方法
expandTargetNode(node: ExampleNestedNode) {
  if (this.treeControl.isExpandable(node)) {
    this.treeControl.expand(node);
  }
}

模板同样绑定点击事件：

<mat-tree-node (click)="expandTargetNode(node)" *matTreeNodeDef="let node">
  <div class="tree-node-content">
    {{node.name}}
  </div>
</mat-tree-node>

额外小技巧 #

如果需要实现点击节点切换展开/折叠状态，直接用TreeControl的toggle()方法就行，比单独调用expand()或collapse()更灵活：

toggleTargetNode(node: any) {
  if (this.treeControl.isExpandable(node)) {
    this.treeControl.toggle(node);
  }
}

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