Question

我对这个rxjs tap（）运算符感到困惑，因为它从未在这个简单的Angular组件中触发，而Subject值的确在屏幕上得到了更新。我还尝试使用BehaviorSubject代替，但结果相同。我在这里做错了什么？

import { Component } from '@angular/core';

import { Subject, BehaviorSubject } from 'rxjs';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  template: '{{ selectedUserId | async }}',
})
export class AppComponent { 

  selectedUserId = new Subject<number>();
  // selectedUserId = new BehaviorSubject<number>(0);

  ngOnInit() {
    this.selectedUserId
      .pipe(
        tap(id => console.log(id)) // why this is not logging to console?
      );
    setTimeout(() => this.selectedUserId.next(1), 1000);
    //this.selectedUserId.next(1);
  }

}

Answer 1

这是因为异步管道订阅的Observable没有水龙头。

具体来说，管道运算符位于

this.selectedUserId
  .pipe(
    tap(id => console.log(id)) // why this is not logging to console?
  );

不修改存储在Observable中的this.selectedUserId。相反，它将创建并返回带有Observable的新tap，但是由于您从不subscribe返回返回的Observable，因此tap永远不会被调用...

Answer 2

此行?this.selectedUserId.pipe(tap(id => console.log(id)) );返回一个新的可观察基准selectedUserId，因此您需要订阅新的可观察基准，开始获取值和。

选项卡运算符将在新的可观察对象上运行，而不会影响基本可观察对象（selectedUserId）

  const obs =  this.selectedUserId
      .pipe(
        tap(id => console.log(id)) 
      );

   obs.subscribe()

demo ??

为了清楚起见，新的Observable将由异步管道运行，而不是Observable的值将在这段时间内更改可观察对象的基础

  private selectedUserId = new Subject<number>();
  public userId$ : Observable<number>;

  ngOnInit() {
   this.userId$ =  this.selectedUserId
      .pipe(
        tap(id => console.log(id)) ,
      );

    setTimeout(() => this.selectedUserId.next(1), 1000);
    setTimeout(() => this.selectedUserId.next(2), 2500);
    setTimeout(() => this.selectedUserId.next(3), 5000);
  }

模板

{{ userId$ | async }}

demo ??

为什么此分接头操作器不触发？

2 个答案: