Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
120
rated 0 times [  127] [ 7]  / answers: 1 / hits: 22294  / 8 Years ago, wed, june 8, 2016, 12:00:00

I have shareService and subscribe that is in another components :



import { Component, Input, OnDestroy } from '@angular/core';
import { MissionService } from './mission.service';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'my-astronaut',
template: `
<p>
{{astronaut}}: <strong>{{mission}}</strong>
<button
(click)=confirm()
[disabled]=!announced || confirmed>
Confirm
</button>
</p>
`
})
export class AstronautComponent implements OnDestroy{
@Input() astronaut: string;
mission = <no mission announced>;
confirmed = false;
announced = false;
subscription:Subscription;

constructor(private missionService: MissionService) {
this.subscription = missionService.missionAnnounced$.subscribe(
mission => {
this.mission = mission;
this.announced = true;
this.confirmed = false;
})




}
confirm() {
this.confirmed = true;
this.missionService.confirmMission(this.astronaut);
}
ngOnDestroy(){
// prevent memory leak when component destroyed
this.subscription.unsubscribe();

}
}


I want to know if I have 2 subscribers in my constructor, how to unsubscribe twice subscribers in ngDestroy?
I should use subscription2:Subscription;?and in ngDestroy this.subscription2.unsubscribe();?
this is true?


More From » angular

 Answers
32

You can collect subscriptions that you want to unsubscribe at once in ngOnDestroy() in an array



export class AstronautComponent implements OnDestroy{
@Input() astronaut: string;
mission = <no mission announced>;
confirmed = false;
announced = false;
subscriptions:Subscription[] = [];

constructor(private missionService: MissionService) {
this.subscriptions.push(missionService.missionAnnounced$.subscribe(
mission => {
this.mission = mission;
this.announced = true;
this.confirmed = false;
}));

this.subscriptions.push(fooService.fooObservable$.subscribe(
...
}));
}

confirm() {
this.confirmed = true;
this.missionService.confirmMission(this.astronaut);
}

ngOnDestroy(){
// prevent memory leak when component destroyed
this.subscriptions.forEach(s => s.unsubscribe());
}
}

[#61857] Monday, June 6, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
coleman

Total Points: 518
Total Questions: 81
Total Answers: 96

Location: Aland Islands
Member since Wed, Nov 17, 2021
3 Years ago
;