如何在Angular中展示递归文件夹结构并实现路由导航？

问题背景 #

后端返回递归结构的文件夹JSON数据，需在Angular应用中实现类似操作系统的目录浏览功能（进入/返回文件夹），作为Angular新手，需要路由及整体实现的具体建议。

后端返回的JSON数据 #

{
  "id": "0",
  "name": null,
  "parentId": null,
  "folderType": "chatMessages",
  "folders": [
    {
      "id": "3195588631115178",
      "name": "Testfolder",
      "parentId": null,
      "folderType": "chatMessages",
      "folders": [
        {
          "id": "3195588620182363",
          "name": "Subfolder",
          "parentId": "3195588631115178",
          "folderType": "chatMessages",
          "folders": [
            {
              "id": "3206824598737435",
              "name": "Interesting",
              "parentId": "3195588620182363",
              "folderType": "chat",
              "folders": [],
              "items": [
                {
                  "id": "3208409930553392",
                  "name": "Message",
                  "folderId": "3206824598737435",
                  "updated": "2022-05-27T07:28:40.450Z",
                  "frontendFolderId": null,
                  "text": "<p>This is an HTML with Image.</p>",
                  "keywords": "test",
                  "subject": "What kind of subject",
                  "slashCommand": "test",
                  "language": "en-US",
                  "setupItemId": "3208409930553392"
                }
              ]
            }
          ],
          "items": [
            {
              "id": "3195595211854821",
              "name": "Message in subfolder",
              "folderId": "3195588620182363",
              "updated": "2022-05-19T12:05:39.503Z",
              "frontendFolderId": null,
              "text": "Message in subfolder",
              "keywords": "test",
              "subject": "Message in subfolder",
              "slashCommand": "sub",
              "language": "bn-BD",
              "setupItemId": "3195595211854821"
            }
          ]
        }
      ],
      "items": []
    }
  ],
  "items": [
    {
      "id": "2888102250465731",
      "name": "bye",
      "folderId": null,
      "updated": "2022-05-25T11:15:36.367Z",
      "frontendFolderId": null,
      "text": "Thanks for contacting us.  Please do not hesitate to contact us again if we can be of further assistance.",
      "keywords": "bye",
      "subject": null,
      "slashCommand": null,
      "language": null,
      "setupItemId": "2888102250465731"
    }
  ]
}

实现步骤建议 #

1. 路由配置 #

在app-routing.module.ts中配置带参数的路由，匹配不同文件夹路径：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FolderBrowserComponent } from './folder-browser/folder-browser.component';

const routes: Routes = [
  // 根路径对应根文件夹（id为"0"）
  { path: '', component: FolderBrowserComponent },
  // 带folderId参数的路由，匹配子文件夹
  { path: 'folders/:folderId', component: FolderBrowserComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 数据服务封装 #

创建文件夹数据服务，负责加载、缓存和查找文件夹节点：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { tap } from 'rxjs/operators';

// 定义类型接口
export interface FolderItem {
  id: string;
  name: string;
  folderId: string | null;
  updated: string;
  text: string;
  // 其他字段按需补充
}

export interface Folder {
  id: string;
  name: string | null;
  parentId: string | null;
  folderType: string;
  folders: Folder[];
  items: FolderItem[];
}

@Injectable({ providedIn: 'root' })
export class FolderService {
  private folderData: Folder | null = null;

  constructor(private http: HttpClient) {}

  // 加载后端数据
  loadFolderData(): Observable<Folder> {
    if (this.folderData) {
      return of(this.folderData);
    }
    return this.http.get<Folder>('/api/folders').pipe(
      tap(data => this.folderData = data)
    );
  }

  // 递归查找指定ID的文件夹
  findFolderById(folderId: string, currentFolder?: Folder): Folder | undefined {
    if (!currentFolder && !this.folderData) return undefined;
    const targetFolder = currentFolder || this.folderData;
    if (targetFolder.id === folderId) {
      return targetFolder;
    }
    for (const subFolder of targetFolder.folders) {
      const found = this.findFolderById(folderId, subFolder);
      if (found) return found;
    }
    return undefined;
  }

  // 获取当前文件夹的完整路径（用于面包屑）
  getFolderPath(folderId: string): Folder[] {
    const path: Folder[] = [];
    let currentFolder = this.findFolderById(folderId);
    while (currentFolder) {
      path.unshift(currentFolder);
      currentFolder = currentFolder.parentId ? this.findFolderById(currentFolder.parentId) : undefined;
    }
    return path;
  }
}

3. 文件夹浏览组件实现 #

创建FolderBrowserComponent，监听路由参数变化并渲染内容：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FolderService, Folder, FolderItem } from '../folder.service';

@Component({
  selector: 'app-folder-browser',
  template: `
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <span *ngFor="let folder of folderPath; let last = last">
        <a *ngIf="!last" [routerLink]="getFolderRoute(folder.id)">{{ folder.name || 'Root' }}</a>
        <span *ngIf="last">{{ folder.name || 'Root' }}</span>
        <span *ngIf="!last"> / </span>
      </span>
    </div>

    <!-- 文件夹列表 -->
    <div class="folder-list">
      <div *ngFor="let folder of currentFolder?.folders" class="folder-item" (click)="navigateToFolder(folder.id)">
        📁 {{ folder.name }}
      </div>
    </div>

    <!-- 项目列表 -->
    <div class="item-list">
      <div *ngFor="let item of currentFolder?.items" class="item-item">
        📄 {{ item.name }}
      </div>
    </div>
  `,
  styles: [`
    .breadcrumb { margin: 10px 0; padding: 10px; background: #f5f5f5; }
    .folder-item { cursor: pointer; padding: 8px; margin: 4px 0; background: #e8f0fe; }
    .item-item { padding: 8px; margin: 4px 0; background: #fafafa; }
  `]
})
export class FolderBrowserComponent implements OnInit {
  currentFolder: Folder | undefined;
  folderPath: Folder[] = [];

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private folderService: FolderService
  ) {}

  ngOnInit(): void {
    // 监听路由参数变化
    this.route.paramMap.subscribe(params => {
      const folderId = params.get('folderId') || '0'; // 默认根文件夹ID为"0"
      this.loadFolder(folderId);
    });
  }

  private loadFolder(folderId: string): void {
    this.folderService.loadFolderData().subscribe(() => {
      this.currentFolder = this.folderService.findFolderById(folderId);
      this.folderPath = this.folderService.getFolderPath(folderId);
    });
  }

  navigateToFolder(folderId: string): void {
    this.router.navigate(['/folders', folderId]);
  }

  getFolderRoute(folderId: string): string[] {
    return folderId === '0' ? ['/'] : ['/folders', folderId];
  }
}

4. 优化与扩展 #

• 左侧文件夹树：可单独创建递归组件，通过*ngFor循环渲染子文件夹，点击时同步更新右侧路由。
• 懒加载数据：若数据量较大，可改为点击文件夹时请求对应子数据，而非一次性加载全部递归结构。
• 样式优化：参考目标UI调整组件样式，添加图标、hover效果等提升交互体验。

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