angular--material---tree

在项目中需要用到tree，但是material的不同的tree有不同的用法。在未深入研究使用别人的案例时，踩了一个大坑，导致需求一直未能做出来，现在特此来记录一下使用。

1. DynamicDataSource---tree

不能够实现tree的完全expand/collapse.

 <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding matTreeNodePaddingIndent="25">
      <button mat-icon-button disabled></button>
      <!--<a [routerLink]='["/Detail"]' [queryParams]="{partId:node.value.countersConfigurations['partnerId'],id:node.value.id,aPorMDMCounterType:node.value.aPorMDMCounterType}" routerLinkActive="router-active">{{node.name}}</a>-->
      <a>{{node.counterNode.name}}</a>
    </mat-tree-node>
    <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding
                   matTreeNodePaddingIndent="25" [ngClass]="{'header': node.level == 0}"
                   (click)="toggleNotLoadingNode(node);">
      <button mat-icon-button
              [attr.aria-label]="'toggle ' + node.counterNode.name" matTreeNodeToggle *ngIf="node.level != 0">
        <mat-icon class="mat-icon-rtl-mirror">
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button>
      <span>{{node.counterNode.name }}</span>
      <div *ngIf="" class="loader"></div>
    </mat-tree-node>
  </mat-tree>

2. TreeFlatOverviewExample----tree

能够实现tree的完全expand/collapse.

<div>
  <div class="header">
    <span>Counters</span>
    <button mat-stroked-button type="button" (click)="ExpandAll()">ExpandAll</button>&nbsp;&nbsp;
    <button mat-stroked-button type="button" (click)="CollapseAll()">CollapseAll</button>
  </div>
  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
    <!-- This is the tree node template for leaf nodes -->
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
      <!-- use a disabled button to provide padding for tree leaf -->
      <button mat-icon-button disabled></button>
      {{node.counterNode.name}}
    </mat-tree-node>
    <!-- This is the tree node template for expandable nodes -->
    <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
      <button mat-icon-button matTreeNodeToggle
              [attr.aria-label]="'toggle ' + node.counterNode.name">
        <mat-icon class="mat-icon-rtl-mirror">
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button>
      {{node.counterNode.name}}
    </mat-tree-node>
  </mat-tree>
</div>