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

Question

我是新手ngrx,我遇到了这个小问题,我还没弄明白如何解决.

基本上我有一个从商店ListComponent渲染一个ListItemComponents 数组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？

---

编辑

这是一个有效的stackblitz项目,现在我的应用程序中渲染List内部的逻辑ListItem是不同的,但问题是相同的.

Answer 1

我想你是正确的：

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

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

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

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

更新：

我自己得出了这个答案，但我刚刚注意到@FanCheung 在评论中之前提出了这个解决方案的基本内容。