在垫子树中将孩子与线连接到父母答案

【问题标题】：Connecting child with lines to parent in mat tree在垫子树中将孩子与线连接到父母
【发布时间】：2021-06-27 11:18:32
【问题描述】：

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

我已经完成了图标和框，但我无法画线。谁能帮我画线？我正在使用垫嵌套树。这是 stackblitz 链接：https://stackblitz.com/edit/angular-qhper2 垫子图标未在 stackblitz 中加载。不过我只需要线条。

可以通过 CSS 编辑 li 和 ul 标签的样式。但我不擅长 CSS。任何帮助将不胜感激。

【问题讨论】：

前段时间，我在stackoverflow.com/questions/56376237/…回答了类似的问题。但它不是 mat-tree，只是一个带有子对象的递归组件
我给出的例子中的线条是否可以制作。

标签： css angular tree angular-material

【解决方案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

【讨论】：