重新加载对话框组件后订阅 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) 命令的执行次数与我已经打开/关闭对话框的次数一样多。因此，当我打开对话框时，它会订阅.next() 服务添加的所有值。但我希望对话框只订阅服务添加的最后一个值。

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

Answer 1

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

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
 }

Answer 2

关闭对话框后终止订阅。

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


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