// 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 /
ruta. Cuando navego a una ruta diferente en mi aplicación y vuelvo nuevamente, SomeComponent
se suscribirá al evento nuevamente, lo que hará que la devolución de llamada se active dos veces. ¿Cómo suscribirse al evento una vez o cancelar la suscripción al destruir el componente y suscribirse nuevamente?
// Can't subscribe after. ngOnDestroy() { this.service.someEvent.unsubscribe(); }
Una llamada para subscribe
devuelve una instancia de Disposable
, que tiene un método dispose
.
O si está utilizando RxJS 5, se ha cambiado el nombre de dispose
para unsubscribe
de baja (gracias @EricMartinez).
Y de los documentos de RxJS :
...cuando ya no estamos interesados en recibir los datos a medida que llegan, llamamos a disponer de nuestra suscripción.
Almacene el resultado de su llamada para subscribe
y luego elimine la suscripción dentro de ngOnDestroy
.
export class SomeComponent implements OnDestroy { constructor(public service: Service) { this.subscription = this.service.someEvent.subscribe((x) => {...}); } ngOnDestroy() { this.subscription.unsubscribe(); } }
export class SomeComponent implements OnDestroy { constructor(public service: Service) { this.subscription = this.service.someEvent.subscribe((x) => {...}); } ngOnDestroy() { this.subscription.dispose(); } }
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(); }