X-Git-Url: https://juplo.de/gitweb/?a=blobdiff_plain;ds=sidebyside;f=src%2Fapp%2Fhero-detail%2Fhero-detail.component.ts;h=76e7912fc40ec748fc5aa29a3a36701166d288a5;hb=fd92a662c471619278e561f25a4beb7ef78d0690;hp=caa9c091e162601ab48c8c6d150e1aa7c2ac6aa4;hpb=aa0556604bc625981bfd2f787f7b1ef2dadb9938;p=examples%2Fangular-tour-of-heroes diff --git a/src/app/hero-detail/hero-detail.component.ts b/src/app/hero-detail/hero-detail.component.ts index caa9c09..76e7912 100644 --- a/src/app/hero-detail/hero-detail.component.ts +++ b/src/app/hero-detail/hero-detail.component.ts @@ -1,5 +1,10 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { Location } from '@angular/common'; + +import { HeroService } from '../hero.service'; import { Hero } from '../hero'; +import { MessageService } from '../message.service'; @Component({ selector: 'app-hero-detail', @@ -8,11 +13,31 @@ import { Hero } from '../hero'; }) export class HeroDetailComponent implements OnInit { - @Input() hero : Hero; + hero: Hero | undefined; - constructor() { } + constructor( + private route: ActivatedRoute, + private heroService: HeroService, + private messageService: MessageService, + private location: Location + ) { } ngOnInit() { + this.getHero(); + } + + getHero(): void { + this.route.params.subscribe(params => { + const id: number = +params.id; + this.hero = undefined; + this.heroService.getHero(id).subscribe(hero => { + this.messageService.add('HeroDetailComponent: retrived hero ' + JSON.stringify(hero)); + this.hero = hero; + }); + }); } + goBack(): void { + this.location.back(); + } }