web-dev-qa-db-ja.com

In angular 2クエリパラメータを保持し、ルーティングするクエリパラメータを追加する方法

たとえば、ルート/cars?type=coupeと、追加のクエリパラメータを使用して同じエンドポイントに移動します（ただし、既存のものを保持します）。私はこのようなことをしようとしています

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

最初のクエリパラメータは保持されますが（type = cars）、追加されたパラメータ（model = renault）は無視されます。これは予想される/正しい動作ですか、それとも何らかのバグですか？ preserveQueryParamsはqueryParamsよりも優先されますか？他のスムーズな解決策はありますか？

javascriptangularangular2-routingquery-parameters
23
user7405505

In Angular 4+、preserveQueryParamsはqueryParamsHandlingの代わりに廃止されました。オプションは'merge'または'preserve'。

コード内の例（NavigationExtrasで使用）：

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

テンプレート内の例：

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

残念ながらこのように動作します：

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

次のようなカスタムディレクティブを追加してみてください。

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

更新：以下のDarkNeuronの回答を参照してください。

10
kemsky

未解決の問題があり、ナビゲーション設定ごとではなく、ルーター設定をpreserveQueryParamsにするためのプルリクエストも既にあります

1
Günter Zöchbauer