在NGXS中组合多个@Select [英] Combining Multiple @Select in NGXS

问题描述

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

I have multiple @Selects in a component like this:

@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()中获取所有值，并将它们分配给可以在模板中使用的一些变量.我不想直接通过异步使用它们，因为我需要操纵它们.

Now, I want to fetch the values in my ngOnInit() for all of them and assign them to some variables which I can use in my template. I don't want to use them directly using async as I need to manipulate them.

最好的方法是什么?

推荐答案

正如评论所提到的， combineLatest 可能是您正在寻找的运算符.

As the comments have mentioned, combineLatest is probably the operator you are looking for.

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

You can still use the async pipe in your template if you combine those source selector Observables into another stream via map rather than a number of variables defined in the component. e.g.

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 管道处理预订.

Then in your template you can use combinedStream$ | async to access the manipulated form, and let the async pipe handle the subscription.

就NGXS而言，如果数字选择器的这种组合变得很普遍，并且您想在多个组件之间重用该组合，那么您就可以看看NGXS 元选择器，然后像往常一样直接在模板中使用它们.

In terms of NGXS, if this combining of a number selectors becomes common and you want to reuse that combination across multiple components then you'd want to take a look at NGXS Joining Selectors, or Meta Selectors, and use those directly in the template as usual.

这篇关于在NGXS中组合多个@Select的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！