如何在 Angular 中创建任意深度的文件夹结构？

Question

我创建了一个对象数组：  folders = [    {      id: 1,      folderName: "Folder1",      files: ["File 1", "File 2"],      folder: [        {          folderName: "Subfolder of folder1",          folder: []        }      ]    },    {      id: 2,      folderName: "Folder2",      files: ["File 1", "File 2"],      folder: []    }  ]我想显示信息，以及子文件夹的信息作为文件夹名称下的子列表：<ul *ngFor="let folder of folders">  <li> {{folder.id}} {{folder.folderName}}     <ul>      <li>{{folder.files}}</li>    </ul>  </li>  <ng-container *ngIf="!(folder.folder.length <= 0)">  <ul *ngFor="let folder2 of folder.folder">    <li>      {{folder2.id}} {{folder2.folderName}}      <ul>        <li>{{folder.files}}</li>      </ul>    </li>  </ul></ng-container></ul>现在我想知道如何显示具有任意数量子文件夹的文件夹。在我的方法中，如果我想再降低一级，我总是必须添加代码，但这会是重复的。还有其他方法可以解决这个问题吗？

Answer 1

您可以使用递归组件。

首先，您可以定义一个文件夹接口：

interface Folder {

  id: number;

  folderName: string;

  files: string[];

  folders: Folder[];

}

然后用它来正确定义您的数据：

const folder: Folder = {

      id: 0,

      folderName: "Folder0",

      files: ["File 1", "File 2"],

      folders: [

        {

          id: 1,

          folderName: "Folder1",

          files: ["File 1", "File 2"],

          folders: [

            {

              id:3,

              files: ["File 1"],

              folderName: "Subfolder of folder1",

              folders: []

            }

          ]

        },

        {

          id: 2,

          folderName: "Folder2",

          files: ["File 1", "File 2"],

          folders: []

        }

      ]

    };

然后创建一个组件来显示任何文件夹对象：

*.html

<h1>{{ folder.folderName }}</h1>

<ul>    

  <li *ngFor="let fileName of folder.files"> 

    {{ fildeName }} 

  </li>

</ul>

<!-- Display subfolders -->

<display-folder *ngFor="let subFolder of folder.folders" [folder]="subFolder"></display-folder>

*.ts

@Component({

    selector: 'display-folder',

    ...

})

export class DisplayFolder {

    @Input() folder: Folder;    

}

Answer 2

我喜欢用ng-template这些东西。您可以定义一个可重复使用的模板，该模板反过来会呈现其自身。

<ng-container *ngFor="let folder of folders">

    <ul>

        <ng-container [ngTemplateOutlet]="folderNode" [ngTemplateOutletContext]="{$implicit:folder}"></ng-container>

    </ul>

</ng-container>

<ng-template #folderNode let-folder>

    <li> {{folder.folderName}} </li>

    <li *ngFor="let file of folder.files">{{file}}</li>

    <ng-container *ngIf="folder.folder">

        <ng-container *ngFor="let subFolder of folder.folder">

            <ul>

                <ng-container [ngTemplateOutlet]="folderNode" [ngTemplateOutletContext]="{$implicit:subFolder}">

                </ng-container>

            </ul>

        </ng-container>

    </ng-container>

</ng-template>

这是一个工作示例。

Answer 3

缩进的一种解决方案：

家长：

<ng-container *ngFor="let folder of folders">

    <app-folder [folder]="folder" [indentationLevel]="0"></app-folder>

</ng-container>

孩子：

<div class="folder-row" style="margin-left: {{indentationLevel * 32}}px" (click)="folder.isExpanded = !folder.isExpanded">

  <ion-icon class="folder-row__icon" *ngIf="folder.type === folderType.group" [name]="folder.isExpanded ? 'folder-open' : 'folder'"></ion-icon>

  <img class="folder-row__user-image" src="assets/mock-data/{{folder.userId}}.jpg" *ngIf="folder.type === folderType.user" alt="👤">

  {{folder.title}}

</div>

<ng-container *ngIf="folder.isExpanded">

  <ng-container *ngFor="let folder of folder.subFolders">

    <app-folder [folder]="folder" [indentationLevel]="indentationLevel + 1"></app-folder>

  </ng-container>

</ng-container>

怎么运行的：

style="margin-left: {{indentationLevel * 32}}px"

这会根据类值创建内联样式

父级：基本情况：

 [indentationLevel]="0"

文件夹： 进度：

 [indentationLevel]="indentationLevel + 1"