在Angular中,避免存储重复订阅对象的推送通知可以通过使用RxJS的操作符来实现。以下是一个示例代码:
import { Component, OnDestroy } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
@Component({
selector: 'app-notification',
template: `
{{ notification }}
`,
})
export class NotificationComponent implements OnDestroy {
notification$: Observable;
subscription: Subscription;
constructor(private notificationService: NotificationService) {
this.notification$ = this.notificationService.getNotification().pipe(
distinctUntilChanged() // 使用distinctUntilChanged操作符来过滤重复的通知
);
this.subscription = this.notification$.subscribe();
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
@Injectable()
export class NotificationService {
private notificationSubject: Subject = new Subject();
getNotification(): Observable {
return this.notificationSubject.asObservable();
}
sendNotification(notification: string) {
this.notificationSubject.next(notification);
}
}
在上面的代码中,NotificationService是一个可注入的服务,用于发送通知。NotificationComponent是一个消费者组件,负责订阅通知并在页面上显示出来。通过使用distinctUntilChanged操作符,我们可以过滤掉相同的通知,从而避免存储重复的订阅对象。
在NotificationComponent的构造函数中,我们创建了一个notification$的Observable对象,该对象通过调用getNotification方法从NotificationService获取通知。然后我们使用distinctUntilChanged操作符对通知进行过滤,确保只有在通知发生变化时才会触发订阅。
最后,在组件销毁时,我们取消订阅以避免内存泄漏。