Angular 2+ 仅在更改时订阅 observable答案

【问题标题】：Angular 2+ subscribe to observable on change onlyAngular 2+ 仅在更改时订阅 observable
【发布时间】：2017-10-18 00:35:46
【问题描述】：

所以这是场景。我有一个带有 BehaviorSubject 的用户服务和一个返回此 BehaviorSubject 的 observable 的方法。我的第二个文件是订阅 observable 的标头组件。问题是.. 是否可以只订阅更改，或者我需要在this.userSubject.next(this.user) 之前有一些逻辑？

这里是代码供参考：

// user.service.ts
user: User;
private userSubject = new BehaviorSubject<User>(new User({}));

keepUpdated = () => {
  this.tokenService.tokenStream()
    .subscribe(token => {
      this.user.update(token);
      this.userSubject.next(this.user);
    });
}

这里

// header.component.ts
ngOnInit() {
  this.userService.keepUpdated();
  this.userService.userStream()
    .subscribe(user => {
      // Here is the problem. This console.log gets called everytime userSubject.next(this.user) send something. I would like it only only to be called if the user is different from the previous one.
      console.log(user);
    });
}

【问题讨论】：

标签： angular observable angular2-observables behaviorsubject

【解决方案1】：

您可以使用distinctUntilChanged 运算符（documentation）：

ngOnInit() {
  this.userService.keepUpdated();
  this.userService.userStream()
    .distinctUntilChanged()
    .subscribe(user => {
      console.log(user);
    });
}

这应该通过与前一个比较来过滤每个发出的值，如果不同，则调用订阅，否则不。

【讨论】：

【解决方案2】：

新 Rxjs 版本的更新答案：使用 .pipe(distinctUntilChanged())

ngOnInit() {
    this.userService.keepUpdated();
    this.userService.userStream()
        .pipe(distinctUntilChanged())
        .subscribe(user => {
          console.log(user);
        });
}

【讨论】：