在 Angular 4 路由器中执行查询参数

Question

我正在尝试使用此语法按照此处接受的答案使用 queryParams 进行导航：

this.router.navigate(['add', { queryParams: { type: $event.value } }], { relativeTo: this.route });

但是不是： .../add?type=someEventValue

这导致可选参数（也称为矩阵表示法）

.../add;queryParams=%5Bobject%20Object%5D

我做错了什么？有没有办法在 Angular 4.3.x 路由器中强制执行旧式搜索参数？

Answer 1

如果将可选参数添加到根路由，您将获得 ?param=value，如果将其添加到子路由，您将获得 ;param=value.

Angular需要这个来区分路由参数属于哪个。

Answer 2

queryParams 对象应该是您调用 navigate 函数时传递的第二个参数的一部分。

你应该做的是：

this.router.navigate(['add'], { queryParams: { type: $event.value }, relativeTo: this.route });

Enforce queryParameters in Angular 4 router