在Angular 6中,您可以使用RxJS操作符distinctUntilChanged()
来获取不同的订阅。这个操作符会过滤掉连续重复的值,只返回不同的值。
以下是一个示例代码:
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
@Component({
selector: 'app-example',
template: `
Distinct Subscription Example
Last Value: {{ lastValue }}
`
})
export class ExampleComponent implements OnInit {
values$: Observable;
lastValue: number;
ngOnInit() {
// 模拟一个观察流,每秒发出一个递增的值
this.values$ = new Observable(observer => {
let i = 0;
setInterval(() => {
observer.next(i++);
}, 1000);
});
// 仅订阅不同的值
this.values$.pipe(
distinctUntilChanged()
).subscribe(value => {
this.lastValue = value;
});
}
getValue() {
this.values$.subscribe(value => {
console.log(value);
});
}
}
在这个示例中,我们创建了一个名为values$
的可观察流,它每秒发出一个递增的值。然后,在ngOnInit()
生命周期钩子中,我们使用distinctUntilChanged()
操作符来过滤掉连续重复的值,并将不同的值存储到lastValue
变量中。在模板中,我们展示了最后一个不同的值,并提供一个按钮来获取当前值。当我们点击按钮时,会通过调用getValue()
方法来订阅可观察流,这将打印出当前值。
请注意,如果您想要比较对象的属性而不是整个对象,可以使用distinctUntilKeyChanged()
操作符,并指定要比较的属性。