Angular Material 6.0.1 树默认打开并全部展开/折叠

Question

我在我的项目中使用 Angular Material 树。 是否可以默认打开树。

是否有一种方法可以同时展开/折叠所有节点(例如，使用按钮)

https://material.angular.io/components/tree/overview

Answer 1

MatTree 的 treeControl 提供了一个 expandAll 方法，您可以使用该方法展开所有树节点，并使用 collapseAll 关闭所有树节点。

可以通过ViewChild实例化MatTree，在ngAfterViewInit生命钩子(Hook)中调用expandAll使其展开默认情况下。

@ViewChild('tree') tree;

ngAfterViewInit() {
  this.tree.treeControl.expandAll();
}

从模板调用的源代码示例:

<button (click)="tree.treeControl.collapseAll()">collapseAll</button>
<button (click)="tree.treeControl.expandAll()">expandAll</button>
<mat-tree #tree [dataSource]="dataSource" [treeControl]="treeControl">
  ...
<mat-tree>

参见 example .