Angular: Сервисная функция отмены подписки на основной предмет Observable

Question

У меня есть простой простой сервис, который я использовал здесь. Есть очень похожие примеры ресурсов, подобных этому. https://jasonwatmore.com/post/2018/06/25/angular-6-communicating-between-components-with-observable-subject

export class BasicService {

  private messageSource = new Subject();
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(currentMessage) {
    this.messageSource.next(currentMessage);
  }
}

Когда я пытался отписаться на компоненте, который получает данные, он говорит

функция отмены подписи не существует.

Как бы я изменил сервисную функцию, указанную выше, чтобы разрешить отписаться?

ngOnDestroy() {
    this.copyChangeAddressService.unsubscribe();
  }

Answer 1

Проблема в том, как вы отписываетесь.

BasicService хорош, но давайте попробуем это:

export class BasicService {

  private messageSource: Subject<any>; 
  public currentMessage: Observable<any>;

  constructor() {
    this.messageSource = new Subject();
    this.currentMessage = this.messageSource.asObservable();
  }

  changeMessage(currentMessage) {
    this.messageSource.next(currentMessage);
  }
}

Кроме того, вы можете использовать BehaviorSubject, он работает так же, как Subject ивы всегда сохраняете последнее значение: https://medium.com/@luukgruijs/understanding-rxjs-behaviorsubject-replaysubject-and-asyncsubject-8cc061f1cfc0

export class BasicService {

  private messageSource: BehaviorSubject<any>; 
  public currentMessage: Observable<any>;

  constructor() {
    this.messageSource = new BehaviorSubject();
    this.currentMessage = this.messageSource.asObservable();
  }

  changeMessage(currentMessage) {
    this.messageSource.next(currentMessage);
  }

  getLastValue(): any {
     this.messageSource.value;
  }
}

Затем в компоненте, который вы используете BasicService, вы должны отписаться следующим образом:

export class CustomComponent implements OnInit, OnDestroy {
   let subscription: Subscription;
   constructor(private basicService: BasicService) {}

   public ngOnInit() {
     this.subscription = this.basicService.currentMessage.subscribe(
       // do something when a event is emitted
     );
   }

   public ngOnDestroy() {
     this.subscription.unsubscribe();
   }
}

Это основной способобрабатывать подписки.

Я рекомендую вам начать использовать RxJ для обработки подписок:

https://angular -guru.com / blog / angular-more-unknown-features (Раздел 8. Подписки RxJS)

Answer 2

Вам необходимо отписаться от наблюдаемого, предлагаемого вашим сервисом, а не от самого сервиса.

ngOnDestroy() {
    this.copyChangeAddressService.currentMessage.unsubscribe();
  }

Лучше предоставить метод, а также подписаться и отписаться на возвращаемый объект этого метода.

observeMessage(): Observable<any> {
    return this.currentMessage.asObservable();
}

Подписаться и отписаться:

mySubscription: Subscription;

ngOnInit() {
    this.mySubscription = this.copyChangeAddressServicecurrentMessage.observeMessage().subscribe(
    // your code here
    );
}

ngOnDestroy() {
    this.mySubscription.unsubscribe();
}