Como manejar rutas en angular

Cuando se trabaja con Angular uno de los features mas importantes son las rutas estas son muy facil de implementar.

¿Qué necesitamos?

1. NPM, por lo tanto se necesita Nodejs

2. Editor de tu preferencia, pero con soporte para TypeScript

3. Un proyecto vacío, si no sabes cómo lee el post Creando un proyecto con angular 4

Que vamos a hacer

La estructura que nos arroja CLI es la siguiente o al menos la más importante

├── src
│   └── app
│       ├── app.component.html 
│       ├── app.component.ts 
│       ├── app.module.ts 

Lo que vamos hacer es mostrar una tabla de usuarios, y agregaremos un detalle de cada usuario.

Los componentes

Se agregan dos componentes uno de usuarios y otro de detalle asi que la estructura de archivos queda de la siguiente forma

├── app
│   ├── app.component.html
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── detail
│   │   ├── detail.component.html
│   │   └── detail.component.ts
│   └── users
│       ├── users.component.html
│       └── users.component.ts

El componente de usuarios

En el archivo /app/users/users.component.ts agregamos una colección de datos de usuarios este lo puedes obtener del sitio JSONPlaceholder

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  users: any=[
    {
      "id": 1,
      "name": "Leanne Graham",
      "username": "Bret",
      "email": "Sincere@april.biz",
      "address": {
        "street": "Kulas Light",
        "suite": "Apt. 556",
        "city": "Gwenborough",
        "zipcode": "92998-3874",
        "geo": {
          "lat": "-37.3159",
          "lng": "81.1496"
        }
      },
      "phone": "1-770-736-8031 x56442",
      "website": "hildegard.org",
      "company": {
        "name": "Romaguera-Crona",
        "catchPhrase": "Multi-layered client-server neural-net",
        "bs": "harness real-time e-markets"
      }
    }, ...
    
  ]
}

En el archivo /users/users.component.html y mostramos una tabla con los usuarios

  <h2>Users</h2>
  <table>
      <tr>
      <th>Id</th>
      <th>Name</th>
      </tr>
      <tr *ngFor="let user of users">
          <td><a routerLink="/detail/{ { user.id } }"> { { user.id } } </a></td>
          <td>{ { user.name } }</td>
      </tr>
  </table>

Lo importante de aquí es la siguiente línea <a routerLink="/detail/"> { { user.id } } </a> la propiedad routerLink se le pasa la ruta a la que vamos a llamar /detail y el parámetro id del usuario { { user.id } }

El componente detalle

El archivo /app/detail/detail.component.ts vamos a recibir el parámetro id que nos ayudara a buscar dentro de nuestra colección de datos para mostrarlos dentro de la vista detalle

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html'
})
export class DetailComponent {
  users: any=[...]
  id= null;
  user = null;
  constructor(private route: ActivatedRoute ){
    this.id= this.route.snapshot.params['id'];
    this.user=(this.searchUser());
  } 
  searchUser(){
    return this.users.filter( (user)=>{ return user.id == this.id})[0] || null;
  } 
}

Esta línea this.id= this.route.snapshot.params['id']; nos ayuda a obtener el parámetro id

Con el método searchUser() mediante un arrow funtion extraemos la información del usuario

El archivo /app/detail/detail.component.html solo mostramos la información del usuario

<h2>Detail</h2>
<table>
    <tr>
        <td>Name</td><td></td>    
    </tr>
    <tr>
        <td>Email</td><td></td>
    </tr>
    <tr>
        <td>Phone</td><td></td>
    </tr>
</table>

Modificando el componente principal

Recordemos que por default había creado un componente, entonces hay que modificarlo para que active las rutas.

El archivo /app/app.component.html queda de la siguiente forma y lo mas importante es el tag router-outlet

<div>
  <h1>Routes</h1>
  <router-outlet></router-outlet>
</div>

Configurando la ruta

Dentro del archivo app/app.module.ts realizamos lo siguiente

1. Agregamos la definición de las rutas en una variable appRoutes

     const appRoutes: Routes =[
     {path:'',component:UsersComponent},
     {path:'users',component:UsersComponent},
     {path:'detail/:id',component:DetailComponent}
     ]
   

2. agregamos la definicion en el @ngModule

     @NgModule({
    declarations: [
      UsersComponent,
      DetailComponent
    ],
    imports: [
        RouterModule.forRoot(appRoutes)
    ]    
     })
   

El archivo app/app.module.ts queda de la siguiente forma

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { Routes,RouterModule } from "@angular/router";

import {UsersComponent} from './users/users.component';
import {DetailComponent} from './detail/detail.component';

const appRoutes: Routes =[
  {path:'',component:UsersComponent},
  {path:'users',component:UsersComponent},
  {path:'detail/:id',component:DetailComponent}
]
@NgModule({
  declarations: [
    AppComponent,
    UsersComponent,
    DetailComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Y el resultado

1. Vista usuarios

2. Vista detalle

¿Donde está el codigo?

Quieres ver como funciona antes de escribir codigo, porque no, aqui te dejo el repo en git