重新加载对话框组件后订阅 BehaviorSubject

Question

这是我已有的代码：

device.service.ts

import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class DeviceService {

  deviceList: any;

  private deviceListSource = new BehaviorSubject(this.deviceList);
  currentDeviceList = this.deviceListSource.asObservable();

  constructor(){}

  getDevices(): void {
    this.http.get<any>('https://........')
      .subscribe(data => {
        this.deviceListSource.next(data.data);
      }, error => console.log('Could not GET devices.'));
  }

我的对话框组件如下所示：

devices.component.ts

  ngOnInit() {

      this.deviceService.getDevices();
      this.deviceService.currentDeviceList.subscribe(data => {
      console.log(data)
    });
  }

这对于在多个组件之间共享某些值非常有效。当我关闭对话框（devices.component.ts）并再次重新打开它而不重新加载整个页面时，console.log(data) 命令的执行次数与我已经 opened/closed 对话框的次数一样多。因此，当我打开对话框时，它会依次订阅 .next() 服务添加的所有值。但我希望对话框只订阅服务添加的最后一个值。

据我了解，此 BehaviorSubject 正是针对此用例。我错过了什么吗？还是有另一种（更好的）方法来实现？

Answer 1

关闭对话框后终止订阅。

someSubscription: Subscription
ngOnInit() {
      this.deviceService.getDevices();
      this.someSubscription = this.deviceService.currentDeviceList.subscribe(data => {
      console.log(data)
    });
}


ngOnDestroy() {
    if (this.someSubscription) {
        this.someSubscription .unsubscribe();
    }
}

Answer 2

之前的订阅仍然保留流，因此您需要在销毁设备组件之前清除它。一种方法是：

devices.component.ts

 destroy$ = new Subject();

 ngOnInit() {
      this.deviceService.getDevices();
      this.deviceService.currentDeviceList
       .pipe(takeUntil(this.destroy$)) // takUntil from rxjs
       .subscribe(data => {
      console.log(data)
    });
  }

 ngOnDestroy(){
    this.destroy$.next();
    this.destroy$.complete(); // always call complete for guaranteed subscription removal
 }

重新加载对话框组件后订阅 BehaviorSubject

Subscribing to BehaviorSubject after reloading the dialog component

behaviorsubject

angular