如何解决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>
最后,在单个组组件中,有两个条件:
- 该组是树的末端,我只在其中显示该组的列表。
- 该组具有子组,我要在其中进行递归并显示组列表,这些子组现在已嵌入并过滤掉。
<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 举报,一经查实,本站将立刻删除。