angular - 递归使用智能组件时，@ ngrx从存储中选择特定的状态片

我对ngrx有点陌生，但遇到了这个小问题，但尚未弄清楚如何解决。

基本上，我有一个ListComponent，它呈现了ListItemComponent存储中的ngrx数组。

@Component({
  ...
  template: `
    <list-item *ngFor="let item of item$ | async" [data]="item">
    </list-item>
  `
})
export class ListComponent implements OnInit {
  item$: Observable<ListItem>;
  constructor(private store: Store<ListState>) {}

  ngOnInit() {
    this.item$ = this.store.select(selectListItems);
  }
}

现在，在ListItemComponent内部，在某些特定情况下，我想呈现另一个ListComponent，可以在其中添加项目，但是由于出现Maximum call stack size exceeded错误，因此此方法不起作用。

我的猜测是，如果我错了，请纠正我，因为嵌套的ListComponent正在访问与根ListComponent相同的状态片，它只是试图将相同的列表一遍又一遍地嵌套并呈现为无穷大。

所以这是问题，我应该如何构成我的选择器，以便在状态树中为每个嵌套的ListComponent提供正确的入口点？

编辑

这是一个working stackblitz project，现在我的应用程序中在List中呈现ListItem的逻辑是不同的，但问题是相同的。

最佳答案

我觉得你是对的:



尝试更新ListComponent以接受ListItemComponent的组件输入变量。参见工作示例https://stackblitz.com/edit/angular-ngrx-recursive-components-7mzncj

在该示例中，第5个ListItemComponent也呈现了ListComponent。但是，单击第5个ListItemComponent上的“将元素添加到列表”按钮时，代码仍会将新元素添加到父列表中。我猜您将要更新其处理方式的逻辑。不知道您要完成什么。

核心问题是列表正在生成自身。因此，如果一个列表生成另一个列表，则会遇到递归问题。通过使用组件输入变量，可以停止列表自身的生成并消除递归问题。

更新:

我自己一个人来回答这个问题，但是我只是注意到@FanCheung在评论中以前提出了基本上是什么解决方案。