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ó

Següent revisió
Revisió prèvia
development:angular:rutas [03/02/2020 07:50] – creat matedevelopment: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, 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'; import {GLOBAL_ROUTES} from './app.routes';
 ... ...
Línia 34: Línia 45:
     { path: '**', pathMatch: 'full', redirectTo: 'home' }     { path: '**', pathMatch: 'full', redirectTo: 'home' }
 ];</sxh> ];</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>
 +
  • development/angular/rutas.1580745001.txt.gz
  • Darrera modificació: 03/02/2020 07:50
  • per mate