创建带有水平和垂直线的树视图，显示使用 css 的连接性答案

【问题标题】：Create tree view with horizontal and vertical lines showing the connectivity using css创建带有水平和垂直线的树视图，显示使用 css 的连接性
【发布时间】：2019-10-15 23:46:57
【问题描述】：

我有一个要求，我们需要在其中显示嵌套元素以使文件夹和子文件夹具有水平线和垂直线。我搜索但找不到任何相关的东西。请参阅下图以供参考。

Sample Image

有人可以帮我解决这个问题吗？

【问题讨论】：

欢迎来到 Stack Overflow！预计您至少会尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： html css angular

【解决方案1】：

首先它知道如何使用 .css 来制作它。我发现这个美女Minimalist Tree View In Pure CSS

好吧，有了这个想法，我们可以使用 Angular 来生成一个“递归组件”。但首先我们必须考虑到我们需要使用“属性选择器”来不生成组件的标签。别担心，它只是用作选择器之类的

selector: '[recursive]'

所以，不要写一些类似的东西

<recursive></recursive>

我们可以使用一些类似的

<ul recursive></ul>

嗯，组件就像

<li *ngFor="let item of children">
    {{item.label}}
    <ul recursive *ngIf="item.children" 
        [children]="item.children" 
        [parent]="self" 
        [level]="level!=undefined?level+1:0">
    </ul>
</li>

@Component({
  selector: '[recursive]', //<--the the "selector"
  templateUrl:'./hello.component.html'
})    
export class HelloComponent  {
  @Input() level: number;
  @Input() label: string;
  @Input() children: any;
  @Input() parent: any;

  self=this;

}

好吧，我添加了我在代码中不使用的属性“level”和“parent”，但如果我们的组件“更多”显示树，会很有趣。

而我们的 app.component.html 有点像

<ul class="tree" recursive [children]="data"></ul>

小心。我需要在 app.component 中使用 ViewEncapsulation.None 来传输 .css

看到我们给[孩子]自己的数据

在哪里，例如

data = [{label: "Parent1", children: [
      { label: "Parent 1's only child"  }
  ]},
    {label:"Parent2"},
    {label:"Parent3", children: [
      { label: "1st Child of 3" ,children:[
         {label:"1st grandchild"},
         {label:"2nd grandchild"}
      ]},
      { label: "2nd Child of 3" },
      { label: "3rd Child of 3" }
      ]
   },
   {
    label: "Parent 4", children: [
      { label: "Parent 4's only child"  }
  ]}]

你可以在this stackblitz看到

更新如果我们想添加打开/关闭容量，很容易添加一个跨度并使用 [ngClass] 来处理三种情况：文档、打开和关闭，所以我们的recursive.html 变成了

<li *ngFor="let item of children">
    <span [ngClass]="!item.children?
         'doc':item.isOpen?'open':'close'" 
         (click)="item.isOpen=!item.isOpen"></span>
    {{item.label}}
    <ul recursive *ngIf="item.children && item.isOpen" 
        [children]="item.children" 
        [parent]="self" 
        [level]="level!=undefined?level+1:0">
    </ul>
</li>

我使用了类似的 .css

.doc,.open,.close
{
  display:inline-block;
  width:1rem;
  height:1rem;
  background-size: 1rem 1rem;
}
.doc
{
  background-image:url('...');
}
.open
{
  background-image:url('...');
}
.close
{
  background-image:url('...');
}

updated stackblitz

更新 2 我不太喜欢使用 ViewEncapsulation.None，所以我们可以做一个变通方法，我们的递归组件变得像

<ul class="tree" *ngIf="level==undefined">
  <ng-container *ngTemplateOutlet="tree;context:{children:children}">
  </ng-container>
</ul>
<ng-container *ngIf="level!=undefined">
  <ng-container *ngTemplateOutlet="tree;context:{children:children}">
  </ng-container>
</ng-container>

<ng-template #tree let-children="children">
<li *ngFor="let item of children">
    <span [ngClass]="!item.children?'doc':item.isOpen?'open':'close'" (click)="item.isOpen=!item.isOpen"></span>{{item.label}}
    <ul recursive *ngIf="item.children && item.isOpen" 
        [children]="item.children" 
        [parent]="self" 
        [level]="level!=undefined?level+1:0">
            </ul>
</li>
</ng-template>

就是这样。第一个使用<ul class="tree">...</ul>，其他不添加<ul>

再次，final stackblitz

【讨论】：