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