angular: rutas

• en vez de tener todas las rutas centralizadas, cada módulo gestiona sus propias rutas (primer paso)
• hasta ahora:

import {RouterModule, Routes} from '@angular/router';
import {HomeComponent} from './components/home/home.component';
const rutas: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'usuario', component: UsuarioComponent },
    { path: '**', pathMatch: 'full', redirectTo: 'home' }
];
export const GLOBAL_ROUTES = RouterModule.forRoot(rutas);

import {GLOBAL_ROUTES} from './app.routes';
...
@NgModule({
    declarations: [
        AppComponent,HomeComponent,UsuarioComponent,
        UsuarioNuevoComponent,UsuarioEditarComponent,UsuarioDetallesComponent
    ],
    imports: [
        BrowserModule, GLOBAL_ROUTES
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

• uso de etiquetas <router-outlet></router-outlet> necesario
• rutas hijas:

  const rutas: Routes = [
      { path: 'home', component: HomeComponent },
      {
          path: 'usuario/:id',
          component: UsuarioComponent,
          children: [
              { path: 'nuevo', component: UsuarioNuevoComponent },
              { path: 'editar', component: UsuarioEditarComponent },
              { path: 'detalles', component: UsuarioDetalleComponent },
              { path: '**', pathMatch: 'full', redirectTo: 'nuevo' }
          ]
      },
      { path: '**', pathMatch: 'full', redirectTo: 'home' }
  ];

• uso de las rutas en la página

<div class="btn-group">
    <button [routerLink]="['nuevo']">Nuevo</button>
    <button [routerLink]="['editar']">Editar</button>
    <button [routerLink]="['detalles']">Detalles</button>
</div>
<router-outlet></router-outlet>

• creamos las rutas en el módulo correspondiente:

import {Routes} from '@angular/router';
import {UsuarioNuevoComponent} from './usuario-nuevo.component';
import {UsuarioEditarComponent} from './usuario-editar.component';
import {UsuarioDetalleComponent} from './usuario-detalle.component';
export const USUARIO_ROUTES: Routes = [
    { path: 'nuevo', component: UsuarioNuevoComponent },
    { path: 'editar', component: UsuarioEditarComponent },
    { path: 'detalles', component: UsuarioDetalleComponent },
    { path: '**', pathMatch: 'full', redirectTo: 'nuevo' }
];

• modificamos las rutas de la aplicación

import {RouterModule, Routes} from '@angular/router';
import {HomeComponent} from './components/home/home.component';
import {UsuarioComponent} from './components/usuario/usuario.component';
import {USUARIO_ROUTES} from './components/usuario/usuario.routes';
const rutas: Routes = [
    { path: 'home', component: HomeComponent },
    {
        path: 'usuario/:id',
        component: UsuarioComponent,
        children: USUARIO_ROUTES
    },
    { path: '**', pathMatch: 'full', redirectTo: 'home' }
];
export const GLOBAL_ROUTES = RouterModule.forRoot(rutas);

• modificamos el component del módulo:

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
@Component({
    selector: 'app-usuario',
    templateUrl: './usuario.component.html',
    styleUrls: ['./usuario.component.css']
})
export class UsuarioComponent {
    constructor(private router: ActivatedRoute) {
        this.router.paramMap.subscribe(parametros => {
            console.log('RUTA PADRE');
            console.log(parametros);
        });
    }
}

• para accede a los parámetros a través de los «hijos» del módulo:

...
constructor(private router: ActivatedRoute) {
    this.router.parent.paramMap.subscribe(parametros => {
        console.log('RUTA HIJA');
        console.log(parametros);
    });
...
}

• en el caso de http://localhost:4200/usuario/10/editar/completo, el parámetro completo se gestiona a través del componente de editar, como accededemos a él?
• debemos modificar las rutas del padre para indicar tal hecho (que se recibe un parámetro):

  import {Routes} from '@angular/router';
  import {UsuarioNuevoComponent} from './usuario-nuevo.component';
  import {UsuarioEditarComponent} from './usuario-editar.component';
  import {UsuarioDetallesComponent} from './usuario-detalles.component';
  export const USUARIO_ROUTES: Routes = [
      { path: 'nuevo', component: UsuarioNuevoComponent },
      { path: 'editar/:param2', component: UsuarioEditarComponent },
      { path: 'detalles', component: UsuarioDetallesComponent },
      { path: '**', pathMatch: 'full', redirectTo: 'nuevo' }
  ];
  

• y recogerlo así en el componente de la edición:

  ...
  constructor(private router: ActivatedRoute) {
      this.router.paramMap.subscribe(parametros => {
          console.log(parametros); // {param2: "completo"}
      });
  }
  ...