Diferències
Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.
Següent revisió | Revisió prèvia | ||
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 | = angular: rutas | ||
- | == rutas hijas | + | == rutas hijas en módulo centralizado |
- | * en vez de tener todas las rutas centralizadas, | + | * en vez de tener todas las rutas centralizadas, |
- | * hasta ahora:< | + | * hasta ahora: |
+ | <sxh typescript: title: app.routes.ts; | ||
+ | import {RouterModule, | ||
+ | import {HomeComponent} from ' | ||
+ | const rutas: Routes = [ | ||
+ | { path: ' | ||
+ | { path: ' | ||
+ | { path: ' | ||
+ | ]; | ||
+ | export const GLOBAL_ROUTES = RouterModule.forRoot(rutas); | ||
+ | </ | ||
+ | <sxh typescript; title: app.module.ts; | ||
import {GLOBAL_ROUTES} from ' | import {GLOBAL_ROUTES} from ' | ||
... | ... | ||
Línia 34: | Línia 45: | ||
{ path: ' | { path: ' | ||
];</ | ];</ | ||
+ | * uso de las rutas en la página | ||
+ | <sxh html; title: | ||
+ | <div class=" | ||
+ | <button [routerLink]=" | ||
+ | <button [routerLink]=" | ||
+ | <button [routerLink]=" | ||
+ | </ | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | == rutas hijas gestionadas desde el módulo | ||
+ | * creamos las rutas en el módulo correspondiente: | ||
+ | <sxh typescript; title: usuario.routes.ts; | ||
+ | import {Routes} from ' | ||
+ | import {UsuarioNuevoComponent} from ' | ||
+ | import {UsuarioEditarComponent} from ' | ||
+ | import {UsuarioDetalleComponent} from ' | ||
+ | export const USUARIO_ROUTES: | ||
+ | { path: ' | ||
+ | { path: ' | ||
+ | { path: ' | ||
+ | { path: ' | ||
+ | ]; | ||
+ | </ | ||
+ | * modificamos las rutas de la aplicación | ||
+ | <sxh typescript; title: app.routes.ts; | ||
+ | import {RouterModule, | ||
+ | import {HomeComponent} from ' | ||
+ | import {UsuarioComponent} from ' | ||
+ | import {USUARIO_ROUTES} from ' | ||
+ | const rutas: Routes = [ | ||
+ | { path: ' | ||
+ | { | ||
+ | path: ' | ||
+ | component: UsuarioComponent, | ||
+ | children: USUARIO_ROUTES | ||
+ | }, | ||
+ | { path: ' | ||
+ | ]; | ||
+ | export const GLOBAL_ROUTES = RouterModule.forRoot(rutas); | ||
+ | </ | ||
+ | * modificamos el **component** del módulo: | ||
+ | <sxh typescript; title: usuario.component.ts; | ||
+ | import { Component, OnInit } from ' | ||
+ | import {ActivatedRoute} from ' | ||
+ | @Component({ | ||
+ | selector: ' | ||
+ | templateUrl: | ||
+ | styleUrls: [' | ||
+ | }) | ||
+ | export class UsuarioComponent { | ||
+ | constructor(private router: ActivatedRoute) { | ||
+ | this.router.paramMap.subscribe(parametros => { | ||
+ | console.log(' | ||
+ | console.log(parametros); | ||
+ | }); | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | * para accede a los parámetros a través de los " | ||
+ | <sxh typescript; title: usuario-nuevo.component.ts; | ||
+ | ... | ||
+ | constructor(private router: ActivatedRoute) { | ||
+ | this.router.parent.paramMap.subscribe(parametros => { | ||
+ | console.log(' | ||
+ | console.log(parametros); | ||
+ | }); | ||
+ | ... | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | == acceder a parámetros propios de las rutas hijas | ||
+ | * en el caso de **http:// | ||
+ | * debemos modificar las rutas del padre para indicar tal hecho (que se recibe un parámetro):< | ||
+ | import {Routes} from ' | ||
+ | import {UsuarioNuevoComponent} from ' | ||
+ | import {UsuarioEditarComponent} from ' | ||
+ | import {UsuarioDetallesComponent} from ' | ||
+ | export const USUARIO_ROUTES: | ||
+ | { path: ' | ||
+ | { path: ' | ||
+ | { path: ' | ||
+ | { path: ' | ||
+ | ]; | ||
+ | </ | ||
+ | * y recogerlo así en el componente de la edición:< | ||
+ | ... | ||
+ | constructor(private router: ActivatedRoute) { | ||
+ | this.router.paramMap.subscribe(parametros => { | ||
+ | console.log(parametros); | ||
+ | }); | ||
+ | } | ||
+ | ... | ||
+ | </ | ||
+ |