1afe5dc97d
Moved route configuration into separate variable for consistency Added async pipe to handle subscriptions for list items
56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
// #docplaster
|
|
// #docregion
|
|
// #docregion rxjs-operator-import
|
|
import 'rxjs/add/operator/switchMap';
|
|
// #enddocregion rxjs-operator-import
|
|
import { Component, OnInit } from '@angular/core';
|
|
// #docregion imports
|
|
import { Router, ActivatedRoute, Params } from '@angular/router';
|
|
// #enddocregion imports
|
|
|
|
import { Hero, HeroService } from './hero.service';
|
|
|
|
@Component({
|
|
template: `
|
|
<h2>HEROES</h2>
|
|
<div *ngIf="hero">
|
|
<h3>"{{ hero.name }}"</h3>
|
|
<div>
|
|
<label>Id: </label>{{ hero.id }}</div>
|
|
<div>
|
|
<label>Name: </label>
|
|
<input [(ngModel)]="hero.name" placeholder="name"/>
|
|
</div>
|
|
<p>
|
|
<button (click)="gotoHeroes()">Back</button>
|
|
</p>
|
|
</div>
|
|
`
|
|
})
|
|
export class HeroDetailComponent implements OnInit {
|
|
hero: Hero;
|
|
|
|
// #docregion ctor
|
|
constructor(
|
|
private route: ActivatedRoute,
|
|
private router: Router,
|
|
private service: HeroService
|
|
) {}
|
|
// #enddocregion ctor
|
|
|
|
// #docregion ngOnInit
|
|
ngOnInit() {
|
|
this.route.params
|
|
// (+) converts string 'id' to a number
|
|
.switchMap((params: Params) => this.service.getHero(+params['id']))
|
|
.subscribe((hero: Hero) => this.hero = hero);
|
|
}
|
|
// #enddocregion ngOnInit
|
|
|
|
// #docregion gotoHeroes
|
|
gotoHeroes() {
|
|
this.router.navigate(['/heroes']);
|
|
}
|
|
// #enddocregion gotoHeroes
|
|
}
|