Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- development:angular:rutas [03/02/2020 07:50] – creat mate
+++ development:angular:rutas [09/02/2020 15:06] (actual) – mate
@@ Línia 1: / Línia 1: @@
 = angular: rutas
-== rutas hijas
+== rutas hijas en módulo centralizado
-  * en vez de tener todas las rutas centralizadas, cada módulo gestiona sus propias rutas
+  * en vez de tener todas las rutas centralizadas, cada módulo gestiona sus propias rutas (primer paso)
-  * hasta ahora:<sxh typescript; title: app.module.ts; highlight:1>
+  * 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';
 ...
@@ Línia 34: / Línia 45: @@
     { 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>