javascript - por - router.navigate params

En angular 2, cómo conservar los parámetros de consulta y agregar parámetros de consulta adicionales a la ruta

Question

Por ejemplo, estoy en route /cars?type=coupe y quiero navegar al mismo punto final con parámetros de consulta adicionales (pero manteniendo uno existente). Estoy intentando algo como esto

<a [routerLink]="[''/cars'']" [queryParams]="{model: ''renault''}" preserveQueryParams>Click</a>

Los parámetros de consulta iniciales se conservan (tipo = autos), pero los agregados (modelo = renault) se ignoran. ¿Es este comportamiento esperado / correcto o es algún tipo de error? Parece que preserveQueryParams tiene prioridad sobre queryParams? ¿Hay alguna otra solución suave?

Answer 1

En Angular 4+, preserveQueryParams ha quedado en desuso en favor de queryParamsHandling . Las opciones son ''merge'' o ''preserve'' .

Ejemplo de código (usado en NavigationExtras ):

this.router.navigate([''somewhere''], { queryParamsHandling: "preserve" });

Ejemplo en plantilla:

<a [routerLink]="[''somewhere'']" queryParamsHandling="merge">

Answer 2

Hay un problema abierto y también una solicitud de extracción para hacer preserveQueryParams una configuración de enrutador en lugar de una configuración por navegación

• https://github.com/angular/angular/issues/12664
• https://github.com/angular/angular/pull/12979
• https://github.com/angular/angular/issues/13806

Answer 3

Simplemente funciona de esta manera desafortunadamente:

const q = preserveQueryParams ? this.currentUrlTree.queryParams : queryParams;

Podrías intentar agregar una directiva personalizada como esta:

@Directive({selector: ''a[routerLink][merge]''})
export class RouterLinkDirective implements OnInit
{

    @Input()
    queryParams: {[k: string]: any};

    @Input()
    preserveQueryParams: boolean;


    constructor(private link:RouterLinkWithHref, private route: ActivatedRoute )
    {
    }

    public ngOnInit():void
    {
        this.link.queryParams = Object.assign(Object.assign({}, this.route.snapshot.queryParams), this.link.queryParams);
        console.debug(this.link.queryParams);
    }
}


<a [routerLink]="[''/cars'']" merge [queryParams]="{model: ''renault''}">Click</a>

Actualización: Ver respuesta DarkNeuron a continuación.