45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
|
// #docregion
|
||
|
|
import {Component, Input, OnDestroy} from 'angular2/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();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// #enddocregion
|