Tengo las siguientes rutas en un módulo angular.
const routes: Route[] = [ {path: '', component: AdminProductsComponent, pathMatch: 'full'}, {path: 'products', component: AdminProductsComponent, pathMatch: 'full'}, { path: "products/:id", component: AdminProductDetailsComponent }, { path: "products/:id/edit", component: EditProductComponent }, { path: "orders", component: AdminOrdersComponent }, { path: "orders/:id", component: AdminOrderDetailsComponent }, { path: 'products/new', component: NewProductComponent }, ];Pero cada vez que navego a /products/new en el navegador, AdminProductDetailsComponent se carga con el parámetro de identificación establecido en 'nuevo'. ¿Cómo puedo especificar que el parámetro :id en la ruta 'products/:id' debe ser un número entero?
¿Qué hay de las rutas para niños? ¿Lo intentaste?
const routes: Routes = [ { path: 'products', component: AdminProductsComponent, pathMatch: 'full', children: [ { path: 'new', component: NewProductComponent }, { path: ":id", component: AdminProductDetailsComponent }, { path: ":id/edit", component: EditProductComponent }, ] } ];Puede verificar usando canActivate para la ruta si el parámetro pasado es un número entero; de lo contrario, muestre un mensaje de error o vuelva a enrutar a la ruta adecuada donde puede enviar la información correcta a la URL.
import { Injectable } from "@angular/core"; import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from "@angular/router"; export class TestService implements CanActivate { constructor( ){ } canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { // here check the params const id = +next.paramMap.get('id') // we get it in string if (!isNan(id)) { return true; } else { // route it or do something you want } } }Agregue este guardia a la ruta:
const routes: Route[] = [ {path: '', component: AdminProductsComponent, pathMatch: 'full'}, {path: 'products', component: AdminProductsComponent, pathMatch: 'full'}, { path: "products/:id", component: AdminProductDetailsComponent, canActivate: [TestService] }, { path: "products/:id/edit", component: EditProductComponent }, { path: "orders", component: AdminOrdersComponent }, { path: "orders/:id", component: AdminOrderDetailsComponent }, { path: 'products/new', component: NewProductComponent }, ];También podría haber otras formas, abiertas a sugerencias sobre cómo podríamos hacerlo mejor.