在 NGXS 中组合多个 @Select

Question

我在这样的组件中有多个@Selects：

@Select(ItemState.getMode) mode: Observable<Item>;
@Select(QuestionState.SingleQuestion) question: Observable<Question>;
@Select(ItemState.getItemNames) itemNames: Observable<any>;
@Select(ItemState.getItemStepDetails) itemStepDetails: Observable<any>;

现在，我想在我的 ngOnInit() 中获取所有这些值，并将它们分配给一些我可以在我的模板中使用的变量。我不想使用异步直接使用它们，因为我需要操作它们。

最好的方法是什么？

Answer 1

如评论所述，combineLatest 可能是您正在寻找的运算符。

如果您通过 map 而不是组件中定义的多个变量将这些源选择器 Observables 组合到另一个流中，您仍然可以在模板中使用 async 管道。例如

this.combinedStream$ = combinelatest(mode$, question$, itemName$, itemDetails$)
.pipe(
  map(([m, q, name, detail]) => {
    // Manipulate/project the 4 results into what you need
    return { .. };
});

然后在您的模板中，您可以使用 combinedStream$ | async 访问操作的表单，并让 async 管道处理订阅。

就 NGXS 而言，如果数字选择器的这种组合变得普遍，并且您想在多个组件中重用该组合，那么您会想看看 NGXS Joining Selectors, or Meta Selectors，并直接使用它们像往常一样在模板中。

在 NGXS 中组合多个 @Select

Combining Multiple @Select in NGXS

observable

rxjs

angular

ngxs