角材料 - 为树添加分支线？答案

【问题标题】：Angular material - Add branch lines for tree?角材料 - 为树添加分支线？
【发布时间】：2019-02-11 14:25:18
【问题描述】：

我用Angular material tree 创建了一个简单的树：

https://stackblitz.com/edit/angular-exhejg-vx5i7c?file=app/tree-dynamic-example.html

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" >
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding   >
    <button mat-icon-button ></button>
    {{node.item}}
  </mat-tree-node>


  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding   >
    <button mat-icon-button 
            [attr.aria-label]="'toggle ' + node.filename" matTreeNodeToggle>
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.item + '2'}}
    <mat-progress-bar *ngIf="node.isLoading"
                      mode="indeterminate"
                      class="example-tree-progress-bar"></mat-progress-bar>
  </mat-tree-node>


</mat-tree>

看起来像：

但是如何添加支线？类似（来自here）：

【问题讨论】：

标签： javascript html angular angular-material

【解决方案1】：

没有开箱即用的此类功能。但是您可以通过 CSS 应用它。有一个working example

【讨论】：

可耻，但没有。在 stackblitz.com 上找到它。示例中使用了嵌套材质树，但是材质树的申请很容易。

【解决方案2】：

两个节点展开到一个父节点下时换行

【讨论】：

【解决方案3】：

我正在使用 mat-nested-tree。 step-1 为两个 li 添加左边框。 step-2 在 li 中添加另一个 div。在css下面应用看图...

.setBorder{
  border-bottom: 1px solid black;
  width: 22px;
  height: 0px;
  position: relative;
  left: 0px;
  top: 0px;
}
.borderMain{
  border-left: 1px solid black;
}

【讨论】：

【解决方案4】：

参考https://stackoverflow.com/a/52203131/14783892，更改如下：

.mat-nested-tree-node:last-child ul {
  border-left: 1px solid white;
  margin-left: -41px;
}

到这里：

.mat-nested-tree-node:last-child > li > ul {
  border-left: 1px solid #fff;
  margin-left: -41px;
}

此更改应解决换行问题。

【讨论】：

【解决方案5】：

两个节点在一个父节点下展开时的换行解决方案只需完全清除整个.html、.ts、.css 或.scss 文件。然后以与stackblitz中相同的方式粘贴上面的代码，只需添加： import { OnInit } from '@angular/core'; 在.ts 文件和代码中，它现在可以正常工作了。

【讨论】：