web-dev-qa-db-fra.com

Dans angular 2 comment conserver les paramètres de requête et ajouter des paramètres de requête supplémentaires au routage

Par exemple, je suis sur la route /cars?type=coupe et je veux naviguer vers le même point de terminaison avec des paramètres de requête supplémentaires (mais en conservant un existant). J'essaye quelque chose comme ça

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

Les paramètres de requête initiaux sont conservés (type = voitures) mais ceux ajoutés (modèle = renault) sont ignorés. Est-ce un comportement attendu/correct ou est-ce une sorte de bogue? On dirait que preserveQueryParams a priorité sur queryParams? Existe-t-il une autre solution fluide?

javascriptangularangular2-routingquery-parameters
23
user7405505

Dans Angular 4+, preserveQueryParams ont été déconseillés au profit de queryParamsHandling. Les options sont soit 'merge' ou 'preserve'.

Exemple dans le code (utilisé dans NavigationExtras):

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

Exemple dans le modèle:

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

Cela fonctionne malheureusement de cette façon:

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

Vous pouvez essayer d'ajouter une directive personnalisée comme celle-ci:

@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>

Mise à jour: Voir la réponse de DarkNeuron ci-dessous.

10
kemsky

Il y a un problème ouvert et déjà une demande de pull pour faire de preserveQueryParams un paramètre de routeur au lieu d'un paramètre de navigation

1
Günter Zöchbauer