Подписка на BehaviorSubject после перезагрузки диалогового компонента - PullRequest
Новая
       14

Подписка на BehaviorSubject после перезагрузки диалогового компонента

0 голосов
/ 24 апреля 2019

Вот код, который у меня уже есть:

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 именно для этого варианта использования.Я что-то пропустил?Или есть другой (лучший) способ добиться этого?

Ответы [ 2 ]

1 голос
/ 24 апреля 2019

предыдущий индекс все еще содержит поток, поэтому вам нужно очистить его перед уничтожением компонента устройств.Один из способов сделать это:

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
 }
0 голосов
/ 24 апреля 2019

Убейте свою подписку, как только закроете диалог. 

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


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