Question

我想知道在我使用ngrx stroe时是否有可能部分使用异步管道。

例如，

// ts file
this.name$ = this.store.pipe(
      select(SOME.STATE),
      map((item) => {
        return item.name;
      })
    )

// html file
<p>{{name$ | async}}</p>

很简单，但是如果我需要

// ts file
this.store.pipe(
      select(SOME.STATE),
    )
.subscribe(item => {
  this.name = item.name;
  this.age = item.age // <-
})

someMethod() {
  const age = this.age;
  // ...some processes using 'age' data which from store
}

// html file
<p>{{name}}</p>

像上面一样，如果我有多个数据并且必须进行一些后处理（例如someMethod()），则不确定如何处理异步管道。没有更多的异步管道意味着我也必须手动unsubscribe来编写更详细的代码。

我尝试了以下

// ts file
this.name$ = this.store.pipe(
      select(SOME.STATE),
      map((item) => {
        return item.name;
      })
    )

this.store.pipe(
      select(SOME.STATE),
    )
.subscribe(item => {
  this.age = item.age
})

someMethod() {
  const age = this.age;
  // ...some processes using 'age' data which from store
}


// html file
<p>{{name$ | async}}</p>

工作，但我想知道是否有更好的方法。

谢谢。

Answer 1

使用FlowLayoutPanel运算符代替订阅。

tap

尽管如此，实际上仍然没有理由这样做。取而代之的是，您应该只拥有另一个可观察的物体，例如this.name$ = this.store.pipe( select(SOME.STATE), tap(item => this.age = item.age), map((item) => { return item.name; }));。

Ngrx：是否可以部分使用异步管道？

1 个答案: