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 08:02] – mate
+++ development:angular:rutas [09/02/2020 15:06] (actual) – mate
@@ Línia 105: / Línia 105: @@
 </sxh>
   * para accede a los parámetros a través de los "hijos" del módulo:
-<sxh typescrip; title: usuario-nuevo.component.ts; highlight:3>
+<sxh typescript; title: usuario-nuevo.component.ts; highlight:3>
 ...
 constructor(private router: ActivatedRoute) {
@@ Línia 115: / Línia 115: @@
 }
 </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>