web-dev-qa-db-fra.com

Comment s'abonner une fois à l'émetteur d'événements?

// Part of service
public someEvent: EventEmitter<number> = new EventEmitter();

....

// Component
@Component({
  selector: 'some-component',
  template: `...`
})
export class SomeComponent {
  constructor(public service: Service) {
    this.service.someEvent.subscribe((x) => {
      // Do something
    });
  }
}

SomeComponent s'affiche dans / route. Lorsque je navigue vers un itinéraire différent dans mon application et que je reviens à nouveau, SomeComponent s'abonnera à nouveau à l'événement, ce qui provoquera le rappel deux fois. Comment s'abonner une fois à l'événement ou se désinscrire lors de la destruction du composant et se réinscrire?

// Can't subscribe after.
ngOnDestroy() {
  this.service.someEvent.unsubscribe();
}
angularrxjseventemitterangular2-servicesrxjs5
26
Eggy

Un appel à subscribe renvoie un instance de Disposable , qui a une méthode dispose .

Ou si vous utilisez RxJS 5, dispose a été renommé unsubscribe (merci @EricMartinez).

Et à partir des documents RxJS :

... lorsque nous ne souhaitons plus recevoir les données lors de leur diffusion, nous appelons disposer de notre abonnement.

Enregistrez le résultat de votre appel à subscribe et supprimez ultérieurement l'abonnement dans ngOnDestroy.

RxJS 5: 

export class SomeComponent {
  constructor (public service: Service) {
    this.subscription = this.service.someEvent.subscribe((x) => {...});
  }
  ngOnDestroy () {
      this.subscription.unsubscribe();
  }
}

RxJS <5: 

export class SomeComponent {
  constructor (public service: Service) {
    this.subscription = this.service.someEvent.subscribe((x) => {...});
  }
  ngOnDestroy () {
      this.subscription.dispose();
  }
}
36
sdgluck

Vous pouvez faire quelque chose comme ça:

import { OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Rx';

export class SomeComponent implements OnDestroy {
  private _subscription: Subscription;
  constructor(public service: Service) {
    this._subscription = this.service.someEvent.subscribe((x) => {
      // Do something
    });
  }
}

ngOnDestroy(){
  this._subscription.unsubscribe();
}
3
ShellZero