Búsqueda de sitios web

angular - El router de Angular2 mantiene la cadena de consulta

Escribí una aplicación Angular2 (v2.0.1) que hace uso del enrutador. El sitio web se carga con varios parámetros de cadena de consulta, por lo que la URL completa inicialmente se ve así:

https://my.application.com/?param1=val1&param2=val2&param3=val3

En mi configuración de rutas, tengo una entrada que redirige una ruta vacía:

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/comp1',
        pathMatch: 'full'
    },
    {
        path: 'comp1',
        component: FirstComponent
    },
    {
        path: 'comp2',
        component: SecondComponent
    }
];

Mi problema es que, después de que la aplicación se ha inicializado, la URL ya no contiene los parámetros de consulta, en su lugar se ve así:

https://my.application.com/comp1

¿Hay alguna manera de configurar el router para que mantenga la cadena de consulta inicial al navegar?

Gracias
Lukas

Respuesta #1

No creo que haya una manera de definir eso en la configuración de rutas.

Actualmente es compatible con routerLinks y la navegación imperativa para habilitar

  • preserveQueryParams y
  • preservarFragmento

Puedes añadir un guardia a la ruta de camino vacío, donde en el guardia se realiza la navegación a la ruta /comp1.

router.navigate(['/comp1'], { preserveQueryParams: true }); //deprecated. see update note

router.navigate(['/comp1'], { queryParamsHandling: "merge" });

Hay un PR para permitir configurar preserveQueryParams de manera global.

Nota de actualización: de https://angular.io/api/router/NavigationExtras, preserveQueryParams está obsoleto, use queryParamsHandling en su lugar

Respuesta #2

Si estás navegando usando una plantilla HTML, entonces puedes usar

<a [routerLink]="['/page-2']" [routerLinkActive]="['is-active']" queryParamsHandling="merge">

Algo a tener en cuenta es que el parámetro queryParamsHandling está sin los corchetes.

Respuesta #3

Resulta que la forma no documentada de hacer esto sin otros trucos es simplemente eliminar la barra inicial en el campo "redirectTo". Dado que estás coincidiendo con la ruta completa, puedes tener la certeza de que hará lo que deseas (es decir, sin segmentos inesperados en la URL) y, dado que ya no es un objetivo absoluto, Angular preservará los parámetros de consulta actuales.

Entonces, en este caso

{
  path: '',
  redirectTo: '/comp1',
  pathMatch: 'full'
}

se convierte en :

{
  path: '',
  redirectTo: 'comp1',
  pathMatch: 'full'
}

Fuente: https://github.com/angular/angular/issues/13315

Respuesta #4

La respuesta de Günter Zöchbauer debería funcionar correctamente pero, por alguna razón, no me funciona en absoluto. Lo que terminó funcionando fue pasar los queryParams directamente en lugar de "conservarlos".

Así es como se ve mi guardia:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    (...)
    this.router.navigate(['login'], { queryParams: route.queryParams });
}

Artículos relacionados