访问 Angular 2 应用程序的路由时，如何在 URL 中保留查询字符串参数？

Question

我有一个运行最新 alpha (37) 的 Angular 2 测试应用程序。只有三个路线，如下所示：

@RouteConfig([
  { path: '/', component: Home, as: 'home' },
  { path: '/errors', component: Errors, as: 'errors' },
  { path: '/about', component: About, as: 'about' }
])

我可以访问路由，当我在 URL 中放置查询字符串参数时，我可以很好地阅读它们。但是，在我读取参数后不久，我注意到路由加载正常并且 URL 刷新，删除了查询字符串参数。

也就是说，访问这条路由：

http://localhost:5555/errors?test=abc

加载/errors 路由，但在应用程序加载后URL变成：

http://localhost:5555/errors

这会让用户感到困惑。我想将查询字符串参数保留在 URL 中。

我知道，它处于 alpha 阶段，但这是一个错误还是我忘记在路由器上设置一些东西？如何在 URL 中保留任何查询字符串参数？

谢谢！

Answer 1

这在 Alpha 41 中已修复。查询字符串现在已保留。

Answer 2

Angular 2 的更新：
要保留当前 url 中存在的查询参数，请添加

// import NavigationExtras 
import  { NavigationExtras } from '@angular/router';

// Set our navigation extras object
// that contains our global query params

let navigationExtras: NavigationExtras = {
      preserveQueryParams: true
    };   

// Navigate to the login page with extras
this.router.navigate(['/someLink'], navigationExtras);

欲了解更多信息，请查看here：

Answer 3

试试这个 this.router.navigate(['target'], {preserveQueryParams: true});