将带有线的孩子连接到垫树中的父对象

Question

我需要按照下面的图表构建一个垫子树。

我已经完成了图标和框的绘制，但无法画线。有人可以帮我吗？ 我正在使用垫子嵌套树。 这是stackblitz链接：https://stackblitz.com/edit/angular-qhper2 垫子图标未在stackblitz中加载。我只需要这些行。

Answer 1

你可以使用它：

<mat-checkbox [(ngModel)]="recursive">Recursive</mat-checkbox>
 <mat-card>
  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
   <mat-nested-tree-node *matTreeNodeDef="let node">
    <li>
      <div class="mat-tree-node">  {{node.item}}</div>
    </li>
   </mat-nested-tree-node>
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
    <li class="example-tree-container">
      <div class="mat-tree-node">
        <button mat-icon-button matTreeNodeToggle
                [matTreeNodeToggleRecursive]="recursive"
              [attr.aria-label]="'toggle ' + node.filename">
          <mat-icon>
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        {{node.item}}
    </div>
    <ul class="example-tree-nested-node">
      <div  *ngIf="treeControl.isExpanded(node)">
      <ng-container matTreeNodeOutlet></ng-container>
      </div>
    </ul>
  </li>
  
   </mat-nested-tree-node>
 </mat-tree>

您可以在此处查看完整代码：

stackblitz