change - router events angular 6

Angular2 router mantener cadena de consulta

Question

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

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

En mi configuración de ruta, 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, una vez que la aplicación ha sido bootstrapped, la URL ya no contiene los parámetros de consulta, en su lugar se ve así:

https://my.application.com/comp1

¿Hay alguna forma en que pueda configurar el enrutador para que mantenga la cadena de consulta inicial al navegar?

Gracias
Lukas

Answer 1

Es posible que desee buscar https://github.com/angular/angular/issues para una solicitud de función similar a esta. Si no existe, envíe una solicitud de función.

Mientras tanto: creo que tendrá que crear un componente, en la ruta: '''', con el único propósito de redirigir a ''/ comp1'' mientras se mantienen los parámetros QueryString.

Answer 2

Existe una solución alternativa utilizando rutas secundarias, ya que Angular las conservará en la navegación de la ruta principal.

Primero, agregue una salida de enrutador con nombre en su componente superior:

<router-outlet name="params"><router-outlet>

A continuación, cree un componente ficticio para enrutar a

@Component({
    template: ""
})
export class ParamsComponent {}

y defina una ruta para crear una instancia de este componente en la salida mencionada:

{
    path: '':val1'',
    component: ParamsComponent,
    outlet: "params"
}

Cambie la navegación de su aplicación a:

https://my.application.com/(params:val1)

Si observa cualquier ActivatedRoute, puede encontrar la ruta "params" utilizando:

  var paramsRoute = this.activatedRoute.route.children.find(r => r.outlet == "params");

Si paramsRoute es nulo, la url no contiene (params: val1).

La siguiente parte se pone un poco "hacky" ya que la ruta secundaria se crea una instancia después de la ruta primaria en la carga inicial. Debido a esto, hasta que su aplicación esté completamente cargada, puede encontrar que paramsRoute.snapshot es nulo. Hay una propiedad privada "_futureSnapshot" que contendrá los parámetros de ruta en el inicio inicial ... y persiste durante toda la vida de la aplicación. Puedes llegar a estos usando:

var queryParams = 
      paramsRoute
      ? paramsRoute["_futureSnapshot"].params
      : {};
var val1 = queryParams["val1"];

Dado que _futureSnapshot no forma parte de la API pública, este es probablemente un campo que no debemos utilizar. Si se siente mal al usarlo, probablemente podría suscribirse a paramsRoute.params, pero esto probablemente complicará sus componentes.

if (paramsRoute) {
    paramsRoute.params.subscribe(params => {
        this.queryParams = params;
        this.loadData();
    });
} else {
    this.queryParams = {};
    this.loadData();
}

========= ENMIENDA =============

Encontré una forma aún mejor de extraer los parámetros de consulta que definitivamente NO es complicado ... En un componente o servicio que se crea una instancia antes de que ocurra el enrutamiento, agregue la siguiente lógica:

    const routeRecognizedSubscription = this.router.events
        .filter(e => e instanceof RoutesRecognized)
        .subscribe((e: RoutesRecognized) => {
            const paramsRoute = e.state.root.children.find(r => r.outlet == "params");
            if (paramsRoute) {
                // capture or use paramsRoute.params 
            }
            routeRecognizedSubscription.unsubscribe();
        });

Este código se suscribe temporalmente a los eventos de RoutesRecognized que ocurren antes de la navegación. Después de que reciba el primer evento, se cancelará automáticamente la suscripción, ya que solo necesitamos hacer esto cuando se inicie la aplicación.

En el primer evento, buscamos el estado correspondiente a la salida "params". Si se encuentra, la propiedad params contendrá los datos que necesitamos. No es necesario acceder a propiedades privadas.

Answer 3

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

Así es como se ve mi guardia:

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

Answer 4

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

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

• preserveQueryParams y
• preserveFragment

Puede agregar un protector a la ruta de ruta vacía, donde se realiza la navegación de guardia 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 globalmente.

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

Answer 5

Si está navegando usando una plantilla HTML, entonces puede usar

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

Algo a tener en cuenta es que queryParamsHandling param está sin los corchetes.

Answer 6

Si está navegando usando una plantilla HTML, también puede usar preserveQueryParams="true"

Tenga en cuenta que preserveQueryParams tiene un corchete.

P.ej:

<a [routerLink]="[''/navigate-to'']" preserveQueryParams="true">

Answer 7

capturar la url original en -base href-

https://example.com/order?id=123

entonces va a presionar

https://example.com/order?id=123#/product