0

当我使用ngrx时，如果我想将一个值传递给它的子组件，我会这样做：

// 父组件

<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内部。我现在正在这样做（有没有更好的方法？）：

this.model$.subscribe((model: any) => {
  if (!model) return;
  // Right now here no matter which value changes, it will run.
  // However what I want is:
  // if `product1` changes, do something
  // if `product2` changes, do something
});

我怎么知道哪个状态值发生了变化？谢谢

4

1 回答 1

2

selectstore的函数返回一个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();
}
于 2016-05-27T07:55:29.400 回答