// 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 is displayed in / route. When I navigate to different route in my application, and come back again, SomeComponent will subscribe to the event again, causing callback to fire twice. How to subscribe to the event once or unsubscribe on destroy of the component and subscribe again?
// Can't subscribe after.
ngOnDestroy() {
this.service.someEvent.unsubscribe();
}
A call to subscribe returns an instance of Disposable, which has a method dispose.
Or if you are using RxJS 5, dispose has been renamed to unsubscribe (thanks @EricMartinez).
And from the RxJS docs:
...when we're no longer interested in receiving the data as it comes streaming in, we call dispose on our subscription.
Store the result of your call to subscribe and later dispose of the subscription within 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();
}
}
You can do something like this:
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();
}