angular - navigationend - ¿Cómo suscribirse al emisor de eventos una vez?

title angular 6

Question

// 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 se muestra en / route. Cuando navego por una ruta diferente en mi aplicación y vuelvo de nuevo, SomeComponent se suscribirá nuevamente al evento, lo que provocará que la devolución de llamada se SomeComponent dos veces. ¿Cómo suscribirse al evento una vez o cancelar la suscripción al destruir el componente y volver a suscribirse?

// Can''t subscribe after.
ngOnDestroy() {
  this.service.someEvent.unsubscribe();
}

Answer 1

Puedes hacer algo como esto:

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();
}

Answer 2

Una llamada a subscribe devuelve una instancia de Disposable , que tiene un método dispose .

O si está utilizando RxJS 5, se ha cambiado el nombre de Disose a unsubscribe (gracias @EricMartinez).

Y a partir de los documentos RxJS :

... cuando ya no estamos interesados ​​en recibir los datos a medida que se transmiten, llamamos a disposición en nuestra suscripción.

Almacene el resultado de su llamada para subscribe y luego deshágase de la suscripción dentro de 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();
  }
}