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

Question

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

@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版，但这是一个bug还是我忘了在路由器上设置一些东西？如何在URL中保留任何查询字符串参数？

谢谢！

Answer 1

这在Alpha 41中得到修复。查询字符串现在保持不变。

Answer 2

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

// 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}）;