Question

当我使用 ngrx 时，如果我想将值传递给其子组件，我这样做：

//父组件

break.set myfunc\7   /COND core()==3

现在我想在父组件本身内部使用值<product1-component [product]="(model$ | async)?.product1"></product1-component> <product2-component [product]="(model$ | async)?.product2"></product2-component> this.model$ = Observable .combineLatest( this._store.select('products') ) .let(ProductsModel());和product1。我现在正在这样做（有更好的方法吗？）：

product2

我如何知道哪个州的价值变化？感谢

Answer 1

商店的select功能返回Observable。因此，您可以随意使用Rxjs中的任何运算符来实现您的目标。

要回答您的问题，您可以做的是：

const nonNullModel$ = this.model$.filter(x => !!x);

this.product1$ = nonNullModel$.map(x => x.product1);
this.product2$ = nonNullModel$.map(x => x.product2);

请注意，每次products状态切片更改时，product1$和product2$都会推送新值。如果您只对product1或product2真正更改感兴趣，可以使用distinctUntilChanged运算符：

this.product1$ = nonNullModel$.map(x => x.product1).distinctUntilChanged();

因为这几乎是select为你做的事情，你可以改写：

this.product1$ = this_store.select(x => x.products && x.products.product1);
this.product2$ = this_store.select(x => x.products && x.products.product2);

现在，您可以使用async管道直接在模板中使用每个流，就像将值传递给子组件一样。

<product1-component [product]="product1$ | async"></product1-component>
<product2-component [product]="product2$ | async"></product2-component>

JSON representation of my product 1: {{product1$ | async | json}}

如果您想在父组件类中执行某些操作：

this.sub1 = this.product1$.subcribe(p => // Do something with product 1);
this.sub2 = this.product2$.subcribe(p => // Do something with product 2);

请注意，当您明确订阅（而不是使用async管道）到可观察对象时，您应该在组件被销毁时处理取消订阅。

ngOnDestroy() {
    this.sub1 && this.sub1.unsubcribe();
    this.sub2 && this.sub2.unsubcribe();
}

如何知道ngrx中哪个州的值发生了变化？

1 个答案: