在 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() 中的值，并将它们分配给一些我可以在模板中使用的变量。我不想直接使用 async 来使用它们，因为我需要操纵它们。

最好的方法是什么？

Answer 1

正如评论所提到的，combineLatest可能是您正在寻找的运营商。

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

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或Meta Selectors，并直接在模板中使用它们作为通常。