Angular / Angular 10中的递归组件用法

问题描述

背景故事：

我正在Angular 10应用中构建可分组的数据表，在其中我想尽可能地进行干燥。

这个想法是，用户可以“分组” 列表中任意数量的列

“按眼睛颜色分组” ，然后“按头发颜色分组”

eye-color: green:
  |___hair-color: brown:
    |___User 1
    |___User 2
    |___hair-color: blonde:
      |___User 3
      |___User 4
eye-color: brown:
  |___hair-color: brown:
    |___User 5
    |___User 6
  |___hair-color: blonde:
    |___User 7
    |___User 8

数据对于上下文而言并不重要。

涉及很多文件，所以我将用伪代码进行总结：

我的顶级组件如下所示：

<!-- Show either the plain list or the groups,depending on group-by  -->
<div *ngIf="groupBy">
  <item-table ... ></item-table>
</div>

<div *ngIf="!groupBy">
  <item-group-list ... ></item-group-list>
</div>

然后，在组件内，对每个分组进行迭代，从而导致另一个单个组组件

<div *ngFor="let group of groupList">
  <span>{{ group.count }} {{ group.label }}</span>

  <single-group ... ></single-group>

</div>

最后，在单个组组件中，有两个条件：

1. 该组是树的末端，我只在其中显示该组的列表。
2. 该组具有子组，我要在其中进行递归并显示组列表，这些子组现在已嵌入并过滤掉。

<div *ngIf="!hasSubGroups()">
  <item-table ... ></item-table>
</div>

<div *ngIf="hasSubGroups()">
  <item-group-list ... ></item-group-list>
</div>

问题在于，这导致循环依赖关系返回到 item-group-list 。

例如：

<top-level-component>
  |__<item-table>
OR|
  |__<item-group-list>         <------
       |                              |
       |__<single-group>              |
            |__<item-table>           |
          OR|                         |
            |__<item-group-list>   ---

有时页面会按预期加载并运行精美。但是其他时候，我得到一个错误：

Cannot access 'ItemGroupListComponent' before initialization at Module.ItemGroupListComponent

该错误似乎是随机发生的，使我相信这是此循环引用导致的加载顺序错误。其他一些帖子似乎也指出了这一点。

如果我创建一个单独的重复的“ item-group-list”组件，该组件仅用作子列表，它可以正常工作，但我想避免这种情况。

有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）