帶有查詢參數的 router.navigate Angular 5

Question

我在路由到帶有查詢參數的路由時遇到問題我有一個像這樣的功能

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'}

現在這就是我傳遞到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

Answer 1

可能是因為您已經放置了應該用於第一個參數的括號，但您已將其封裝在整條路線上

您的代碼：

// 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'}}]);

更新路線：

將]右括號僅放在第一個參數內，盡量不要將其放在路由語句的最后一部分。

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

---

概括：

this.router.navigate([ url ], { queryParams: { ... } })

Answer 2

如果要導航到包含查詢參數的 URL 字符串，請嘗試使用router.navigateByUrl 。

例如：

this.router.navigateByUrl('/page?id=37&username=jimmy');

Answer 3

像這樣嘗試：

this.router.navigate(['my-route', 37], { queryParams: { username: "jimmy"}});

Answer 4

this.router.navigateByUrl('/page?id=37&username=jimmy');

當參數是動態的時，這會更好。