Angular - jak się odsubskrybować?

0

Mam komponent:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommunicationService } from '../communication.service';

@Component({
  selector: 'app-edit-item',
  templateUrl: './edit-item.component.html',
  styleUrls: ['./edit-item.component.scss']
})
export class EditItemComponent implements OnInit {


  constructor(private communicationService: CommunicationService) { }

  ngOnInit() {
    this.communicationService.editData$.subscribe(
      message => {
        console.log(message);
      }
    )
  }

  ngOnDestroy() {
    
  }

}

na onDestroy chciałbym się odsubskrybować od editData$. Jak miałbym to zrobić, skoro jest ona zdefiniowana w communicationService?

4

a .subscribe() przypadkiem nie zwraca ci obiektu Subscription, który możesz zapisać a potem dać na nim unsubscribe()?

edit:
przykład copy-paste z dokumentacji RxJS:

import { interval } from 'rxjs';
 
const observable1 = interval(400);
const observable2 = interval(300);
 
const subscription = observable1.subscribe(x => console.log('first: ' + x));
const childSubscription = observable2.subscribe(x => console.log('second: ' + x));
 
subscription.add(childSubscription);
 
setTimeout(() => {
  // Unsubscribes BOTH subscription and childSubscription
  subscription.unsubscribe();
}, 1000);
4

Masz dwie opcje

  1. jak wspomniał @azalut, unsubscribe()
import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommunicationService } from '../communication.service';
 
@Component({
  selector: 'app-edit-item',
  templateUrl: './edit-item.component.html',
  styleUrls: ['./edit-item.component.scss']
})
export class EditItemComponent implements OnInit {
  editDataSub: Subscription;

  constructor(private communicationService: CommunicationService) { }

  ngOnInit() {
    this.editDataSub = this.communicationService.editData$.subscribe(
      message => {
        console.log(message);
      }
    )
  }

  ngOnDestroy() {
    if (this.editDataSub) {
      this.editDataSub.unsubscribe();
    }
  }
}
  1. jeśli dane przychodzą tylko raz (np. z serwisu, który pobiera je z API), skorzystaj z first() albo take(1) (zadanie domowe: poczytać czym się różnią) - wtedy po przyjściu pierwszej paczki danych pójdzie automatyczne odsubskrybowanie (tfu, co za paskud językowy)
  ngOnInit() {
    this.communicationService.editData$
    .pipe(first())
    .subscribe(
      message => {
        console.log(message);
      }
    )
  }
1

Jest jeszcze takie cudo :)

https://github.com/ngneat/until-destroy

1 użytkowników online, w tym zalogowanych: 0, gości: 1