Angular如何递归渲染未知深度的文件夹树导航栏？

直接用递归组件就能解决这个问题，Angular 本身支持这种场景，只要用forwardRef处理好自身引用的循环问题就行，具体步骤如下：

1. 定义递归节点组件 #

创建单独的树节点组件（比如FolderTreeNodeComponent），负责渲染单个节点并递归渲染子节点。

组件 TS 文件 #

import { Component, Input, forwardRef } from '@angular/core';
import { Folder, Project } from './your-models-path';

@Component({
  selector: 'app-folder-tree-node',
  templateUrl: './folder-tree-node.component.html'
})
export class FolderTreeNodeComponent {
  @Input() node: Folder | Project;
  isExpanded = false; // 控制节点展开/折叠状态

  // 用 forwardRef 延迟引用自身，解决循环引用报错
  self = forwardRef(() => FolderTreeNodeComponent);
}

组件模板文件 #

<div class="node-item">
  <!-- 区分文件夹与项目的显示逻辑 -->
  <span class="node-name">
    {{ node.name }}
    <!-- 仅文件夹显示展开/折叠按钮 -->
    <button *ngIf="(node as Folder).children?.length" (click)="isExpanded = !isExpanded">
      {{ isExpanded ? '▼' : '▶' }}
    </button>
  </span>

  <!-- 递归渲染子节点，仅展开状态且有子节点时显示 -->
  <div *ngIf="isExpanded && (node as Folder).children?.length" class="child-nodes">
    <app-folder-tree-node 
      *ngFor="let child of (node as Folder).children" 
      [node]="child">
    </app-folder-tree-node>
  </div>
</div>

2. 模块配置 #

在组件所属的模块中，声明并导出该组件，确保可以在其他组件中引用：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FolderTreeNodeComponent } from './folder-tree-node.component';

@NgModule({
  declarations: [FolderTreeNodeComponent],
  imports: [CommonModule],
  exports: [FolderTreeNodeComponent]
})
export class TreeModule { }

3. 父组件中使用 #

在需要展示树的父组件里，引入TreeModule，然后传入根节点数据即可：

<div class="folder-tree-container">
  <app-folder-tree-node [node]="rootFolder"></app-folder-tree-node>
</div>

关键说明 #

• forwardRef是核心：它会延迟组件的引用解析，避免Angular初始化时出现"未定义组件"的循环引用错误。
• 独立状态管理：每个节点自己维护isExpanded状态，不需要全局状态，逻辑更清晰。
• 类型区分：通过类型断言(node as Folder)区分文件夹和项目，确保只有文件夹会渲染子节点。

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