web-dev-qa-db-ja.com

router.navigate with query params Angular 5

私はそのような機能を持っているクエリパラメータを持つルートへのルーティングに問題があります

goToLink(link) {
    this.router.navigate([`${link.split('?')[0]}`, { queryParams: this.sortParams(link)}]);
}

そしてこの機能

sortParams(link) {
    let queryParams = url.split('?')[1];
    let params = queryParams.split('&');
    let pair = null;
    let data = {};
    params.forEach((d) => {
      pair = d.split('=');
      data[`${pair[0]}`] = pair[1];
    });
    return data;
}

大丈夫だから基本的に私はgoToLink()と呼ばれる関数を持っています、そしてそれはURLを受け取り、渡されるURLはそのようなクエリパラメータを持つ文字列です。

https://website.com/page?id=37&username=jimmy

上記は実際の外観ではなく、クエリパラメータを含むリンク文字列であるため、文字列からパラメータを削除し、sortParams()関数のデータオブジェクトに保存するだけです。上記の文字列を渡して、次のようなオブジェクトを取得します

{id: 37, username: 'jimmy'}

これで、router.navigateのqueryParams:セクションに渡したもの、

オブジェクトが返されると、関数は次のようになります。

this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

だから私は正常に目的のルートにルーティングしますが、クエリパラメータは次のようになります。

/page;queryParams=%5Bobject%20Object%5D

ここで何か間違っていますか？

助けていただければ幸いです！

編集

関数をこれに変更すると

 this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

同じURLを取得します/page;queryParams=%5Bobject%20Object%5D

javascriptangulartypescriptangular-router
14
Smokey Dawson

おそらく最初のパラメータ用のブラケットを配置したが、ルートの全行にそれをカプセル化していた可能性があります

あなたのコード：

// This is the end of your route statement:  '}}]);' which the close bracket is included
this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

ルートの更新：

] 1番目のパラメータ内にのみかっこを配置します。ルートステートメントの最後の部分には配置しないでください。

// Update end line: '}});'
this.router.navigate([`${link.split('?')[0]}`], { queryParams: {id: 37, username: 'jimmy'}});
24
KShewengger