Fin section 11 : services

This commit is contained in:
Lucien Cartier-Tilet 2023-02-24 15:12:39 +01:00
parent de6b2a94ed
commit 1fb0c5c2de
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
4 changed files with 40 additions and 11 deletions

View File

@ -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);
}
}

View File

@ -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]);

View File

@ -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 {}

View 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());
}
}