Question

我是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的逻辑不同但问题是相同的。

Answer 1

我认为你是对的：

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

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

在该示例中，第5个ListItemComponent也会呈现ListComponent。但是，当单击第5个ListItemComponent上的“添加元素到列表”按钮时，代码仍然将新元素添加到父列表中。我猜你会想要更新你的逻辑来处理它。不确定你想要完成什么。

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

更新

我自己来到这个答案，但我注意到@FanCheung，在评论中，之前提出的基本上是这个解决方案。

当递归使用智能组件时，@ ngrx从商店中选择特定的状态切片

修改

1 个答案:

更新