如何将查询参数对象传入Angular的router.navigate方法？

你用routerLink传递查询参数的写法是正确的：

<a [routerLink]="['/editinventoryitem',item.id]" [queryParams]="this.viewState">Edit</a> |

但调用router.navigate时，错误地把viewState直接放到了路由路径数组里，这会生成矩阵参数（用分号分隔），而非标准的查询参数（用问号和&分隔）。正确写法是把queryParams作为navigate方法的第二个配置参数传入：

this.router.navigate(
  ['/inventoryitemdetails', this.editInventoryItemDetails.inventoryItem.id],
  { queryParams: this.viewState }
);

这样生成的URL就会和routerLink的效果一致，用?和&分隔查询参数，示例如下：
http://localhost:4200/index.html#/inventoryitemdetails/272049?searchTerm=&searchType=ManufacturerPN&deletedMode=InStock&viewMode=Compact&sortBy=ManufacturerPN&sortDir=ASC&pageIndex=1&resultsPerPage=25&warehouseID=0

无需手动解析替换分号，也不用模拟DOM点击这种不优雅的实现方式。

内容的提问来源于stack exchange，提问作者browsermator