Angular 2+ 订阅仅在更改时可观察
Angular 2+ subscribe to observable on change only
场景是这样的。我有一个带有 BehaviorSubject 的用户服务和一个返回此 BehaviorSubject 的可观察对象的方法。我的第二个文件是订阅可观察对象的 header 组件。
问题是..是否可以只订阅更改,或者我是否需要在 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);
});
}
您可以使用 distinctUntilChanged
运算符 (documentation):
ngOnInit() {
this.userService.keepUpdated();
this.userService.userStream()
.distinctUntilChanged()
.subscribe(user => {
console.log(user);
});
}
这应该通过将每个发出的值与前一个值进行比较来过滤每个发出的值,如果不同,则将调用订阅,否则不会。
新 Rxjs 版本的更新答案:使用 .pipe(distinctUntilChanged())
ngOnInit() {
this.userService.keepUpdated();
this.userService.userStream()
.pipe(distinctUntilChanged())
.subscribe(user => {
console.log(user);
});
}
场景是这样的。我有一个带有 BehaviorSubject 的用户服务和一个返回此 BehaviorSubject 的可观察对象的方法。我的第二个文件是订阅可观察对象的 header 组件。
问题是..是否可以只订阅更改,或者我是否需要在 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);
});
}
您可以使用 distinctUntilChanged
运算符 (documentation):
ngOnInit() {
this.userService.keepUpdated();
this.userService.userStream()
.distinctUntilChanged()
.subscribe(user => {
console.log(user);
});
}
这应该通过将每个发出的值与前一个值进行比较来过滤每个发出的值,如果不同,则将调用订阅,否则不会。
新 Rxjs 版本的更新答案:使用 .pipe(distinctUntilChanged())
ngOnInit() {
this.userService.keepUpdated();
this.userService.userStream()
.pipe(distinctUntilChanged())
.subscribe(user => {
console.log(user);
});
}