Pipe和Tap VS使用ngx订阅

时间:2018-05-18 16:49:04

标签: angular rxjs pipe tap ngxs

我正在玩管道和订阅。如果我使用带有水龙头的管道,则没有任何东西会登录控制台。如果我使用订阅,它正在工作。那么我做错了什么?

import { Observable } from 'rxjs';
import { tap, take } from 'rxjs/operators';

this.store.select(state => state.auth.authUser).pipe(
  take(1),
  tap((data) => {
    //Not Working - no console output
    console.log('[Tap] User Data', data);

  })
);

this.store.select(state => state.auth.authUser).subscribe((data) => {
  // Working - user data output in console
  console.log('[Subscribe] User Data', data);
})

我使用RxJs 6,TypeScript和ngxs作为Angular 6中的商店。

3 个答案:

答案 0 :(得分:11)

我的回答分为两部分......你问的是什么,你需要什么。 当存在活动订阅时,Observable的值仅流经管道运算符。这就是你看到这种行为的原因。所以你应该做这样的事情:

this.store.select(state => state.auth.authUser).pipe(
  take(1),
  tap((data) => {
    console.log('[Tap] User Data', data)
  })
).subscribe();

但您正在寻找的是状态快照。您可以按如下方式执行此操作:

let data = this.store.selectSnapshot(state => state.auth.authUser);
console.log('[selectSnapshot] User Data', data);

答案 1 :(得分:1)

知道了!我必须附加subscribe()。所以它是:

this.store.select(state => state.auth.authUser).pipe(
  take(1),
  tap((data) => {
    console.log('[Tap] User Data', data)
  })
).subscribe();

答案 2 :(得分:1)

“轻按”(或在RxJS的旧版本中为“ do”)-> 透明地执行操作或副作用,例如日志记录(定义已经说过)。但是,就您而言,您忘记了“ subscribe()”到Observable,这就是为什么在控制台中看不到“用户数据”的原因。

另一方面,在第二种情况下,您已经订阅了一个Observable。