Rutas con parametros

TheJonaCode · Sep 25, 2020 · 159a940 · 159a940
1 parent a68a3a8
commit 159a940
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 7 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -13,14 +13,16 @@ import { NavbarComponent } from './components/shared/navbar/navbar.component';
 import { HomeComponent } from './components/home/home.component';
 import { AboutComponent } from './components/about/about.component';
 import { HeroesComponent } from './components/heroes/heroes.component';
+import { HeroeComponent } from './components/heroe/heroe.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     NavbarComponent,
     HomeComponent,
     AboutComponent,
-    HeroesComponent
+    HeroesComponent,
+    HeroeComponent
   ],
   imports: [
     BrowserModule,

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -3,11 +3,13 @@ import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './components/home/home.component';
 import { HeroesComponent } from './components/heroes/heroes.component';
 import { AboutComponent } from './components/about/about.component';
+import { HeroeComponent } from './components/heroe/heroe.component';
 
 const APP_ROUTES: Routes = [
     { path: 'home', component: HomeComponent },
     { path: 'about', component: AboutComponent },
     { path: 'heroes', component: HeroesComponent },
+    { path: 'heroe/:id', component: HeroeComponent},
     { path: '**', pathMatch: 'full', redirectTo: 'home' }
 ];
 

diff --git a/src/app/components/heroe/heroe.component.html b/src/app/components/heroe/heroe.component.html
@@ -0,0 +1 @@
+<p>heroe works!</p>
diff --git a/src/app/components/heroe/heroe.component.ts b/src/app/components/heroe/heroe.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-heroe',
+  templateUrl: './heroe.component.html'
+})
+export class HeroeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/components/heroes/heroes.component.html b/src/app/components/heroes/heroes.component.html
@@ -3,16 +3,18 @@ <h1>Heroes <small>Marvel y DC</small></h1>
 
 <div class="card-columns">
 
-    <div class="card" *ngFor="let heroe of heroes">
+    <div class="card animated fadeIn fast" *ngFor="let heroe of heroes; let i = index">
         <img [src]="heroe.img" class="card-img-top" [alt]="heroe.nombre">
         <div class="card-body">
           <h5 class="card-title">{{ heroe.nombre }}</h5>
           <p class="card-text">{{ heroe.bio }}</p>
           <p class="card-text"><small class="text-muted"> {{ heroe.aparicion }} </small></p>
 
-          <button type="button" class="btn btn-outline-primary btn-block">
+          <button (click) = "verHeroe(i)"
+            type="button" class="btn btn-outline-primary btn-block">
               Ver más...
           </button>
+          <!-- <a [routerLink]="['/heroe',i]" class="btn btn-outline-primary">Ver más Link... </a> -->
 
         </div>
       </div>

diff --git a/src/app/components/heroes/heroes.component.ts b/src/app/components/heroes/heroes.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { HeroesService, Heroe } from '../../servicios/heroes.service';
+import { Router } from '@angular/router';
 
 
 @Component({
@@ -12,16 +13,21 @@ export class HeroesComponent implements OnInit {
 
   heroes: Heroe[] = [];
 
-  constructor( private _heroesService:HeroesService ) {
-    console.log('Constructor');
+  constructor( private _heroesService:HeroesService,
+              private router:Router
+              ) {
+    //console.log('Constructor');
    }
 
   ngOnInit(): void {
-    
+
     this.heroes = this._heroesService.getHeroes();
 
-    console.log(this.heroes);
+    //console.log(this.heroes);
+  }
 
+  verHeroe( idx:number ){
+    this.router.navigate( ['/heroe', idx] );
   }
 
 }