74 lines
1.7 KiB
TypeScript
74 lines
1.7 KiB
TypeScript
// #docregion
|
|
import { Component, OnInit } from '@angular/core';
|
|
import { Router } from '@angular/router';
|
|
|
|
import { Hero } from './hero';
|
|
import { HeroService } from './hero.service';
|
|
// #docregion hero-detail-component
|
|
import { HeroDetailComponent } from './hero-detail.component';
|
|
|
|
@Component({
|
|
selector: 'my-heroes',
|
|
templateUrl: 'app/heroes.component.html',
|
|
styleUrls: ['app/heroes.component.css'],
|
|
directives: [HeroDetailComponent]
|
|
})
|
|
// #enddocregion hero-detail-component
|
|
export class HeroesComponent implements OnInit {
|
|
heroes: Hero[];
|
|
selectedHero: Hero;
|
|
addingHero = false;
|
|
// #docregion error
|
|
error: any;
|
|
// #enddocregion error
|
|
|
|
constructor(
|
|
private router: Router,
|
|
private heroService: HeroService) { }
|
|
|
|
getHeroes() {
|
|
this.heroService
|
|
.getHeroes()
|
|
.then(heroes => this.heroes = heroes)
|
|
.catch(error => this.error = error);
|
|
}
|
|
|
|
// #docregion addHero
|
|
addHero() {
|
|
this.addingHero = true;
|
|
this.selectedHero = null;
|
|
}
|
|
|
|
close(savedHero: Hero) {
|
|
this.addingHero = false;
|
|
if (savedHero) { this.getHeroes(); }
|
|
}
|
|
// #enddocregion addHero
|
|
|
|
// #docregion deleteHero
|
|
deleteHero(hero: Hero, event: any) {
|
|
event.stopPropagation();
|
|
this.heroService
|
|
.delete(hero)
|
|
.then(res => {
|
|
this.heroes = this.heroes.filter(h => h !== hero);
|
|
if (this.selectedHero === hero) { this.selectedHero = null; }
|
|
})
|
|
.catch(error => this.error = error);
|
|
}
|
|
// #enddocregion deleteHero
|
|
|
|
ngOnInit() {
|
|
this.getHeroes();
|
|
}
|
|
|
|
onSelect(hero: Hero) {
|
|
this.selectedHero = hero;
|
|
this.addingHero = false;
|
|
}
|
|
|
|
gotoDetail() {
|
|
this.router.navigate(['/detail', this.selectedHero.id]);
|
|
}
|
|
}
|