Angular 2. Routing. Entrega 10. Navegacion simple(1)

1. Añadir navegación al app.module

Para ello, en app.module.ts:
1. Añadimos  import { RouterModule } from '@angular/router';
2. Creamos una constante que contenga todas las rutas:

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes',       component: HeroesComponent } ];

       
3. Indicamos el método RouterModule.forRoot en el imports de @NgModule. Que indica la ruta (path) que asignamos al componente. Se puede asignar la ruta directamente o mejor asignarle la constante anterior.

imports: [

              RouterModule.forRoot([

      {path: 'heroes',component: HeroesComponent}
    ])

],

....

o mucho mejor

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
    // other imports here
  ],
  ...
})
export class AppModule { }

4. Añadir  <a routerLink="/heroes">Heroes</a>  en el template dentro de un <nav>.
5. Añadir  <router-outlet></router-outlet> al final del template.

template: `
  <h1>Angular Router</h1>
  <nav>
    <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
  </nav>
  <router-outlet></router-outlet>
`

2. Añadir mas componentes

Para ello se añadirán mas elementos al array del método RouterModule.forRoot en el imports de @NgModule. ( o mejor en la constante appRoutes)


               RouterModule.forRoot([

      {path: 'heroes',component: HeroesComponent},

      {path: 'otro',component: OtroComponent}

    ])

También se añadirá otro <a routerLink="/otro">Heroes</a>  en el template dentro del <nav>. Quedando el template:

template: `
   <h1>{{title}}</h1>
   <nav>
     <a routerLink="/heroes">Heroes</a>
     <a routerLink="/otro">Otro</a>
   </nav>
   <router-outlet></router-outlet>
 `

3. Redirect to

Para ello se añadirán otro elementos al array del método RouterModule.forRoot en el imports de @NgModule, que haga referencia al redirect ( o mejor en la constante appRoutes)

               RouterModule.forRoot([

      {path: 'heroes',component: HeroesComponent},

      {path: 'otro',component: OtroComponent},

      {path: '',redirectTo:'/dashboard', pathMatch: 'full'}

    ])

4. Navegación con parámetro (NO)

Para ello se añadirán otro elementos al array del método RouterModule.forRoot en  el imports de @NgModule, que haga referencia a una ruta al que se le añade "/:parametro"

  { path: 'detail/:id' , component: HeroDetailComponent }

En este caso le pasamos el id como parámetro a la ruta.

Pero en el componente se debe hacer estos import

// Keep the Input import for now, we'll remove it later:
import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Params }   from '@angular/router';
import { Location }                 from '@angular/common';

Y además se debe importar el servicio que nos proporciona el Hero a partir del id.

Pero entonces la cosa se complica y para ello se va a utilizar una nueva estrategia en el punto siguiente.