Fin section 11 : services
This commit is contained in:
parent
de6b2a94ed
commit
1fb0c5c2de
@ -1,24 +1,25 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { POKEMONS } from '../mock-pokemon-list';
|
||||
import { Pokemon } from '../pokemon';
|
||||
import { PokemonService } from '../pokemon.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-detail-pokemon',
|
||||
templateUrl: './detail-pokemon.component.html',
|
||||
})
|
||||
export class DetailPokemonComponent implements OnInit {
|
||||
constructor(private route: ActivatedRoute, private router: Router) {}
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private pokemonService: PokemonService
|
||||
) {}
|
||||
pokemonList: Pokemon[];
|
||||
pokemon: Pokemon | undefined;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.pokemonList = POKEMONS;
|
||||
const pokemonId: string | null = this.route.snapshot.paramMap.get('id');
|
||||
if (pokemonId) {
|
||||
this.pokemon = this.pokemonList.find(
|
||||
(pokemon) => pokemon.id === +pokemonId
|
||||
);
|
||||
this.pokemon = this.pokemonService.getPokemonById(+pokemonId);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,16 +1,20 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { POKEMONS } from '../mock-pokemon-list';
|
||||
import { Pokemon } from '../pokemon';
|
||||
import { PokemonService } from '../pokemon.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-list-pokemon',
|
||||
templateUrl: './list-pokemon.component.html',
|
||||
})
|
||||
export class ListPokemonComponent {
|
||||
pokemonList: Pokemon[] = POKEMONS;
|
||||
export class ListPokemonComponent implements OnInit {
|
||||
pokemonList: Pokemon[];
|
||||
|
||||
constructor(private router: Router) {}
|
||||
constructor(private router: Router, private pokemonService: PokemonService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.pokemonList = this.pokemonService.getPokemonList();
|
||||
}
|
||||
|
||||
goToPokemon(pokemon: Pokemon) {
|
||||
this.router.navigate(['/pokemon', pokemon.id]);
|
||||
|
@ -6,6 +6,7 @@ import { PokemonTypeColorPipe } from './pokemon-type-color.pipe';
|
||||
import { ListPokemonComponent } from './list-pokemon/list-pokemon.component';
|
||||
import { DetailPokemonComponent } from './detail-pokemon/detail-pokemon.component';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { PokemonService } from './pokemon.service';
|
||||
|
||||
const pokemonRoutes: Routes = [
|
||||
{ path: 'pokemons', component: ListPokemonComponent },
|
||||
@ -20,5 +21,6 @@ const pokemonRoutes: Routes = [
|
||||
DetailPokemonComponent,
|
||||
],
|
||||
imports: [CommonModule, RouterModule.forChild(pokemonRoutes)],
|
||||
providers: [PokemonService],
|
||||
})
|
||||
export class PokemonModule {}
|
||||
|
22
src/app/pokemon/pokemon.service.ts
Normal file
22
src/app/pokemon/pokemon.service.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { POKEMONS } from './mock-pokemon-list';
|
||||
import { Pokemon } from './pokemon';
|
||||
|
||||
@Injectable()
|
||||
export class PokemonService {
|
||||
getPokemonList(): Pokemon[] {
|
||||
return POKEMONS;
|
||||
}
|
||||
|
||||
getPokemonById(pokemonId: number): Pokemon | undefined {
|
||||
return POKEMONS.find((pokemon) => pokemon.id === pokemonId);
|
||||
}
|
||||
|
||||
getPokemonTypeList(): string[] {
|
||||
const types: Set<string> = new Set();
|
||||
POKEMONS.forEach((pokemon) => {
|
||||
pokemon.types.forEach((type) => types.add(type));
|
||||
});
|
||||
return Array.from(types.values());
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user