Angular2路由器保持查询字符串

Question

我写了一个使用路由器的Angular2(v2.0.1)应用程序.该网站加载了几个查询字符串参数,因此完整的URL最初看起来像这样:

https://my.application.com/?param1=val1&param2=val2&param3=val3

在我的路由配置中,我有一个重定向空路由的条目:

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/comp1',
        pathMatch: 'full'
    },
    {
        path: 'comp1',
        component: FirstComponent
    },
    {
        path: 'comp2',
        component: SecondComponent
    }
];

我的问题是,在应用程序被引导后,URL不再包含查询参数,而是看起来像这样:

https://my.application.com/comp1

有没有什么办法可以配置路由器,以便在导航时保留初始查询字符串？

谢谢
Lukas

Answer 1

我认为在路由配置中没有办法定义它.

目前支持routerLinks和命令式导航启用

• preserveQueryParams和
• preserveFragment

您可以在空路径路径中添加一个防护,在路径的防护导航/comp1中完成.

router.navigate(['/comp1'], { preserveQueryParams: true }); //deprecated see update note

router.navigate(['/comp1'], { queryParamsHandling: "merge" });

有一个PR允许preserveQueryParams全局配置.

更新说明:来自https://angular.io/api/router/NavigationExtras,不推荐使用preserveQueryParams,请改用queryParamsHandling

Answer 2

如果您使用HTML模板导航,则可以使用

<a [routerLink]="['/page-2']" [routerLinkActive]="['is-active']" queryParamsHandling="merge">

需要注意的是queryParamsHandling参数没有方括号.

Answer 3

GünterZöchbauer的答案应该可以正常使用,但由于某种原因,它根本不适用于我.最终工作的是queryParams直接传递而不是"保留"它们.

这就是我的后卫的样子:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    (...)
    this.router.navigate(['login'], { queryParams: route.queryParams });
}

Answer 4

事实证明，在没有其他黑客手段的情况下实现此目的的未记录方法是简单地删除“ redirectTo”字段中的前导斜杠。由于您匹配的是完整路径，因此可以确定它会按照您想要的方式进行操作（即没有意外的网址段），并且由于它不再是绝对目标，因此Angular将保留当前的查询参数。

所以在这种情况下

{
  path: '',
  redirectTo: '/comp1',
  pathMatch: 'full'
}

变成：

{
  path: '',
  redirectTo: 'comp1',
  pathMatch: 'full'
}

来源：https : //github.com/angular/angular/issues/13315

Answer 5

现在在 Angular 10 中你可以使用如下：

    import { ActivatedRoute, Router } from '@angular/router';

class Component {
    constructor(private route: ActivatedRoute, private router: Router) {}

    someMethod() {
        //You can use either merge or preserve to keep the query params
        this.router.navigate(['/'], { queryParamsHandling: 'preserve' })

    }
}