ccc

Mostrando entradas con la etiqueta Routing. Mostrar todas las entradas
Mostrando entradas con la etiqueta Routing. Mostrar todas las entradas

Routing: Página de error

Crear página de error donde irán todas las rutas q no existan:
ng g c pagError Personalizar el html de esa nuevo componente y luego en src\app\app.module.ts al final del todo del appRoutes:Routes=[ añadir:
{path:'**', component:PagErrorComponent}

Routing: pasar parámetros

En src\app\app.module.ts especificar que esa ruta va a recibir parámetros:
{path:'actualizar/:id', component:ActualizarComponent}
Y ya desde el html:
<a [routerLink]="['/actualizar',indice]"> lo que sea </a>
Para rescatar el parámetro en el constructor del ts de ese componente:
constructor(... private route:ActivatedRoute ...)
...
updateEmpleado() {
let empleadoAux = new Empleado(this.txtNombre,this.txtApellido,this.txtCargo,this.txtSalario);
this.servicioAux.showMensaje("Nombre empleado: "+empleadoAux.nombre);
this.servicioDosAux.updateEmpleado(this.indice,empleadoAux);
this.backToHome();
}

Y en src\app\serviciodos.service.ts crear esa función:
updateEmpleado(indice:number,empleadoAux:Empleado) {
this.arrEmpleados[indice] = empleadoAux;
}

Y ya solo llamarla desde el html:
(click)="updateEmpleado()"
Pasar más parámetros:
<a [routerLink]="['/actualizar',indice]" [queryParams]="{accion:'1'}"> Modificar </a>
Y luego para recuperar esos parámetros en el ts de ese componente:
accion:number;
...
this.accion = this.route.snapshot.queryParams["accion"];

Routing

Primero crear nuevos componentes que vamos a enlazar desde una navbar.

Según vas creando los nuevos componentes con "ng g c loquesea" se tiene que ir registrando en src\app\app.module.ts. El Visual Studio Code lo hace automáticamente, si no lo hiciera pues hay q meterlos manualmente en: @NgModule({
declarations: [

Creamos una variable constante para guardar ahí todas nuestras rutas por ejemplo la llamamos appRoutes:
const appRoutes:Routes=[
{path:'', component:HomeComponentComponent},
{path:'proyectos', component:ProyectosComponentComponent},
{path:'quienes',component:QuienesComponentComponent},
{path:'contacto', component:ContactoComponentComponent}
];
En imports añadir:
RouterModule.forRoot(appRoutes)
Para enlazar a cada uno de ellos desde los href hay que poner en el app.component.html:
<router-outlet></router-outlet>
Y luego ya:
<a href="/proyectos" ...
Para hacer un Routing programado en el ts:
constructor(private router:Router
...
backToHome() {
this.router.navigate(["loquesea"]);
}

Para llamarlo desde el HTML:
(click)="backToHome();"

Para llamarlo desde cualquier función del ts:
this.backToHome();