Question

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

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

Answer 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]：doc，打开和关闭，因此我们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。无，因此我们可以进行变通，然后递归组件变为

<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

Answer 2

尝试使用Angular材质树组件

https://material.angular.io/components/tree/examples

使用水平线和垂直线创建树视图，以使用CSS显示连接性

2 个答案: