查询参数无法正常工作

Question

在我的 Angular2 应用程序中，我需要将一些可选参数传递给路由。因为它们是可选的，所以我决定使用queryParams.

我使用以下代码来传递参数：

public recoverPassword() {
    this.router.navigate(
        ['/access/recover-password', 
        { queryParams: { 'email': this.model.email }} ]
    );
}

我得到这个网址：

http://localhost:4200/access/recover-password;queryParams=%5Bobject%20Object%5D

正如您所看到的，该参数完全错误。我无法解析它的目标组件。正确的网址应该是：

http://localhost:4200/access/recover-password;email=myemail@gg.com

我遵循了官方文档，但找不到可行的解决方案。

Answer 1

queryParams应该作为第二个参数传递（更准确地说，它只是可选的第二个参数的一部分，您可以在此处NavigationExtras阅读更多相关信息），而不是作为第一个参数的一部分传递，第一个参数是您想要导航到的路线。这应该可以解决问题：

public recoverPassword() {
    this.router.navigate(
        ['/access/recover-password'], 
        { queryParams: { 'email': this.model.email } }
    );
}