routing - redireccionar - rutas angular 6

Parámetros opcionales durante el enrutamiento angular2

Question

Esta pregunta ya tiene una respuesta aquí:

• Parámetro de ruta opcional Angular 2 5 respuestas

Cómo definir parámetros opcionales en el enrutamiento de la configuración de enrutamiento de angular2.my de esta manera:

<a [routerLink]="[''../abc'',{xyz: blabla}]">
and
<a [routerLink]="[''../abc'']">
{ path: ''/abc/:xyz'', component: abc, name: ''abc'' }, // Here i want xyz as optional perameter

entonces el problema es que cada vez que uso el primer método con el parámetro blabla funciona bien porque en el momento del enrutamiento he definido el parámetro xyz pero en el caso del segundo método no quiero enviar el parámetro para que la URL se convierta

http: // localhost: 8080 / # / sideNav / abc /

que está llorando bien por primera vez pero después de la página de actualización, nada muestra que toda la ventana se está quedando en blanco sin contenido. entonces hay algún método para proporcionar parámetros opcionales mientras enruta en angular2.

i have also tried without defining parameters like this
{ path: ''/abc'', component: abc, name: ''abc'' }

pero esto arrojará un error en caso de que el valor de xyz sea 1 , convierte 1 en true

Answer 1

Puede definir múltiples rutas con y sin parámetro que tenga el mismo componente:

@RouteConfig([{
path: ''/abc'',
component: Abc,
name: ''abc''},
{
path: ''/abc/:xyz'',
component: Abc,
name: ''abcXyz''
}])

y luego usa el que necesitas

<a [routerLink]="[''/abcXyz'',{xyz: blabla}]">
and
<a [routerLink]="[''/abc'']">

Si routeCongig está ubicado en su archivo raíz, use / antes del nombre de la raíz y si está en el segundo nivel o algo así, use

<a [routerLink]="[''/parentRoot'', {parentParams:value}, ''/abc'']">

Answer 2

Puedes poner ambos juntos,

@RouteConfig([
{ path: ''/abc/:xyz'', component: Abc, name: ''abc'' }
{ path: ''/abc'', component: Abc, name: ''abc'' },
])

si esto no funciona como se espera, debería ver a continuación,

Optional routeparams #3525
https://github.com/angular/angular/issues/3525