如何在Angular中实现任意深度的文件夹结构展示？

你遇到的问题是典型的嵌套递归结构渲染场景，硬编码多层<ul>/<li>的方式肯定没法适配任意深度的子文件夹，Angular的递归组件就是专门解决这类问题的方案——只需要写一个组件，让它自己调用自己来处理子层级即可。

步骤1：创建可递归的文件夹树组件 #

首先我们定义一个FolderTreeComponent，它接收单个文件夹对象作为输入，负责渲染当前文件夹及其所有子文件夹：

组件类代码（folder-tree.component.ts）

import { Component, Input } from '@angular/core';

// 定义文件夹的类型接口，方便类型检查
interface Folder {
  id?: number;
  folderName: string;
  files: string[];
  folder: Folder[];
}

@Component({
  selector: 'app-folder-tree',
  templateUrl: './folder-tree.component.html'
})
export class FolderTreeComponent {
  // 接收父组件传入的当前文件夹对象
  @Input() folder!: Folder;
}

组件模板代码（folder-tree.component.html）

<li>
  <!-- 渲染当前文件夹的ID和名称 -->
  {{ folder.id ? folder.id + ' ' : '' }}{{ folder.folderName }}
  
  <!-- 渲染当前文件夹下的所有文件 -->
  <ul *ngIf="folder.files.length > 0" style="list-style-type: circle;">
    <li *ngFor="let file of folder.files">📄 {{ file }}</li>
  </ul>
  
  <!-- 递归渲染子文件夹：如果当前文件夹有子文件夹，就再次调用自身组件 -->
  <ul *ngIf="folder.folder.length > 0">
    <app-folder-tree 
      *ngFor="let subFolder of folder.folder" 
      [folder]="subFolder"
    ></app-folder-tree>
  </ul>
</li>

步骤2：在父组件中使用递归组件 #

现在回到你的父组件，只需要用这个递归组件遍历顶层文件夹即可，不管嵌套多少层都能自动处理：

父组件模板

<ul style="list-style-type: disc;">
  <app-folder-tree 
    *ngFor="let folder of folders" 
    [folder]="folder"
  ></app-folder-tree>
</ul>

父组件中的数据（和你原来的结构一致，甚至可以加更深的嵌套）

folders = [
  { 
    id: 1, 
    folderName: "Folder1", 
    files: ["File 1", "File 2"], 
    folder: [ 
      { 
        folderName: "Subfolder of folder1", 
        files: [], 
        folder: [
          { 
            folderName: "Sub-subfolder", 
            files: ["Nested File 1", "Nested File 2"], 
            folder: [] 
          }
        ] 
      } 
    ] 
  },
  { id: 2, folderName: "Folder2", files: ["File 1", "File 2"], folder: [] }
];

为什么这个方案可行？ #

• 递归组件会自动处理每一层嵌套：只要当前文件夹有子文件夹，就会重复调用自身组件，不管嵌套深度是多少。
• 代码复用性极高：不需要为每一层子文件夹写重复的模板代码，只维护一个组件即可。
• 修复了你原来代码的小问题：原来直接{{folder.files}}会显示数组的字符串形式，现在通过*ngFor遍历每个文件，展示更友好。

内容的提问来源于stack exchange，提问作者Logik