如何在组件本身内部重用相同的角度组件？答案

【问题标题】：How to reuse the same angular component inside the component itself?如何在组件本身内部重用相同的角度组件？
【发布时间】：2021-11-20 03:26:19
【问题描述】：

我有以下父子组件，并且我正在将数据从父组件传递到子组件。如果 parentData.isFolder===false，我会在子组件中显示 parentData.name，如果 parentData.isFolder===true，我会尝试重用子组件。我想多次使用同一个子组件，直到没有 parentData.isFolder===true 的数据。

我尝试了以下并得到了

错误：超出最大调用堆栈大小

Attempted working stackblitz example

如果这不是实现这一点的正确方法，还有其他方法吗？

parent-component.componet.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 file 1',
        isFolder: true,
        Id: '111',
      },
      {
        name: 'Example file 2',
        isFolder: false,
        Id: '222',
      },
      {
        name: 'Example file 3',
        isFolder: false,
        Id: '333',
      },
    ];
  }
}

parent-component.component.html

<ng-container *ngFor="let item of parentData">
  <app-child-component [parentData]="item"></app-child-component>
</ng-container>

child-component.component.ts

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

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

  constructor() {}

  ngOnInit() {}

}

child-component.compoent.html

<!-- Display names when isFolder === false -->

<ng-container *ngIf="parentData.isFolder === false">
  <ul>
    <li>{{ parentData.name }}</li>
  </ul>
</ng-container>

<!-- Reuse the app-child-component if isFolder === true -->
<ng-container *ngIf="parentData.isFolder === true">
  <app-child-component [parentData]="parentData"> </app-child-component>
</ng-container>

【问题讨论】：

标签： angular typescript

【解决方案1】：

您出现错误“错误：超出最大调用堆栈大小”的原因是您在 parentData 为真时没有对它执行任何操作，并且它将始终返回为真，因此您所拥有的是无限递归.

我猜你想要实现的是一棵树。

如果是这样，我更改了代码以获得您想要的。

parent.component.html - 我更改了 html 以将数组传递给您的子组件，而不是仅将一个对象传递给您的子组件。
parent.component.ts - 我在 parentData 中添加了一个 subFolders 数组来模拟树的子文件夹 UI。 您还可以将属性名称subFolders 更改为parentData 以避免混淆
child.component.html - 我修改了你制作的 html。我迭代了子组件从父组件接收到的parentData 数组并显示了文件夹名称。然后，我再次添加子组件，实现文件夹的递归，直到属性isFolder为false。
child.component.ts - 未进行任何更改。

我还根据您制作的 stackblitz 创建了一个stackblitz。

parent.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 file 1',
        isFolder: true,
        Id: '111',
        subFolders: [{
          name: 'Example file 1',
          isFolder: false,
          Id: '111',
        }, ],
      },
      {
        name: 'Example file 2',
        isFolder: false,
        Id: '222',
      },
      {
        name: 'Example file 3',
        isFolder: false,
        Id: '333',
      },
    ];
  }
}

parent.component.html

<app-child-component [parentData]="parentData"></app-child-component>

child.component.ts

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

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

  constructor() {}

  ngOnInit() {}

}

child.component.html

<ng-container *ngFor="let item of parentData">
  <ul>
    <li>{{ item.name }}</li>
    <app-child-component [parentData]="item.subFolders" *ngIf="item.subFolders"></app-child-component>
  </ul>
</ng-container>

结果：

【讨论】：