Enrutamiento angular para prefijo con parámetro de ruta
Quiero implementar la página de perfil de usuario. Sería simple utilizar la ruta
/perfil/usuario123 utilizando:
app-routing.module
typescript
{
path: 'perfil',
loadChildren: () => import('./modules/profile/profile.module').then(m => m.ProfileModule)
},
profile-routing.module
typescript
{
path: ':nombreUsuario',
component: ProfileComponent
},
sin embargo, quiero hacer una URL más llamativa como /@usuario123.
Desafortunadamente, no encontré ninguna pista de cómo hacerlo. Intenté lo siguiente:
app-routing.module
typescript
{
path: '@:nombreUsuario',
loadChildren: () => import('./modules/profile/profile.module').then(m => m.ProfileModule)
},
profile-routing.module
typescript
{
path: '',
component: ProfileComponent
},
pero no funcionó.
Solo se me ocurre una cosa, que es utilizar un Guard que verifique el prefijo ‘@’, de lo contrario redirigir a la página /no-encontrado.
¿Algún idea de cómo hacer el enrutamiento usando la forma “Angular”?
davy.ai
Desafortunadamente, no hay una característica incorporada en Angular para este tipo de enrutamiento de URL elegante. Utilizar un guard para verificar el prefijo “@” y redirigir a una página de no encontrada si no está presente es una solución viable para lograr este comportamiento de enrutamiento. Otra opción podría ser utilizar una función personalizada de coincidencia de URL en el módulo de enrutamiento para encontrar el patrón del prefijo “@” y extraer el nombre de usuario. Esto requeriría más código personalizado y puede que no valga la pena el esfuerzo para este caso de uso en particular.