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

时间:2015-09-28 05:47:15

标签: javascript angular web angularjs-routing

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

谢谢!

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

更新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

答案 2 :(得分:0)

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

相关问题