Angular如何实现组件自身递归复用并解决调用栈溢出问题

你遇到的栈溢出是因为递归逻辑出现了无限循环：当parentData.isFolder为true时，你直接把当前接收的同一个parentData对象再次传入子组件，这个对象的isFolder属性永远为true，会导致子组件被无限创建，最终触发栈溢出。

要实现嵌套目录的递归渲染，首先要调整数据结构，文件夹类型的节点需要新增children字段，存储该文件夹下的所有子文件/子文件夹数据。

1. 修改父组件数据结构（parent-component.component.ts） #

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

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.css'],
})
export class ParentComponentComponent implements OnInit {
  public parentData;
  constructor() {}

  ngOnInit() {
    this.parentData = [
      {
        name: 'Example folder 1',
        isFolder: true,
        Id: '111',
        // 新增children字段存储文件夹下的子节点
        children: [
          {
            name: 'Sub file 1',
            isFolder: false,
            Id: '111-1'
          },
          {
            name: 'Sub folder 1',
            isFolder: true,
            Id: '111-2',
            children: [
              {
                name: 'Deep file 1',
                isFolder: false,
                Id: '111-2-1'
              }
            ]
          }
        ]
      },
      {
        name: 'Example file 2',
        isFolder: false,
        Id: '222',
      },
      {
        name: 'Example file 3',
        isFolder: false,
        Id: '333',
      },
    ];
  }
}

父组件模板无需修改，保持原有逻辑即可。

2. 修改子组件模板（child-component.component.html） #

<ul>
  <li>
    <!-- 文件节点直接显示名称 -->
    <span *ngIf="!parentData.isFolder">{{ parentData.name }}</span>
    <!-- 文件夹节点先显示名称，再递归渲染子节点 -->
    <ng-container *ngIf="parentData.isFolder">
      <span>{{ parentData.name }}</span>
      <ng-container *ngFor="let child of parentData.children">
        <app-child-component [parentData]="child"></app-child-component>
      </ng-container>
    </ng-container>
  </li>
</ul>

子组件ts文件无需修改，保持原有逻辑即可。

修改后递归会沿着文件夹的children层级向下渲染，当遇到没有子节点的文件节点时自动终止递归，不会再出现无限循环的栈溢出问题，同时支持任意层级的目录嵌套渲染。

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