angular: rutas [miguel angel torres egea]

Aquesta pàgina és només de lectura. Podeu veure'n el codi font, però no podeu canviar-la. Consulteu el vostre administrador si penseu que això és degut a algun error.
= angular: rutas
== rutas hijas en módulo centralizado
  * en vez de tener todas las rutas centralizadas, cada módulo gestiona sus propias rutas (primer paso)
  * hasta ahora:
<sxh typescript: title: app.routes.ts; hidhlight:5>
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);
</sxh>
<sxh typescript; title: app.module.ts; highlight:1>
import {GLOBAL_ROUTES} from './app.routes';
...
@NgModule({
    declarations: [
        AppComponent,HomeComponent,UsuarioComponent,
        UsuarioNuevoComponent,UsuarioEditarComponent,UsuarioDetallesComponent
    ],
    imports: [
        BrowserModule, GLOBAL_ROUTES
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
</sxh>
    * uso de etiquetas **<router-outlet></router-outlet>** necesario
  * rutas hijas:<sxh typescript; title:app.router.ts; highlight:6-11>
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' }
];</sxh>
  * uso de las rutas en la página
<sxh html; title:usuario.component.html;highlight:2-4>
<div class="btn-group">
    <button [routerLink]="['nuevo']">Nuevo</button>
    <button [routerLink]="['editar']">Editar</button>
    <button [routerLink]="['detalles']">Detalles</button>
</div>
<router-outlet></router-outlet>
</sxh>

== rutas hijas gestionadas desde el módulo
  * creamos las rutas en el módulo correspondiente:
<sxh typescript; title: usuario.routes.ts; highlight:5-10>
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' }
];
</sxh>
  * modificamos las rutas de la aplicación
<sxh typescript; title: app.routes.ts; highlight:44,7-10>
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);
</sxh>
  * modificamos el **component** del módulo:
<sxh typescript; title: usuario.component.ts; highlight:2,9-14>
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);
        });
    }
}
</sxh>
  * para accede a los parámetros a través de los "hijos" del módulo:
<sxh typescript; title: usuario-nuevo.component.ts; highlight:3>
...
constructor(private router: ActivatedRoute) {
    this.router.parent.paramMap.subscribe(parametros => {
        console.log('RUTA HIJA');
        console.log(parametros);
    });
...
}
</sxh>

== acceder a parámetros propios de las rutas hijas
  * 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):<sxh typescript; title: usuario.routes.ts; highlight:7>
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' }
];
</sxh>
  * y recogerlo así en el componente de la edición:<sxh typescript; title: usuario-editar.component.ts;highlight:2>
...
constructor(private router: ActivatedRoute) {
    this.router.paramMap.subscribe(parametros => {
        console.log(parametros); // {param2: "completo"}
    });
}
...
</sxh>