如何在 Angular 7 中使用从 URL 获取参数和路由器答案

【问题标题】：How can I use get parameter from URL with router in Angular 7如何在 Angular 7 中使用从 URL 获取参数和路由器
【发布时间】：2018-12-09 06:03:00
【问题描述】：

我真的对 Angular 7 路由器感到困惑。我想从 URL 中的任何位置使用 get 参数“token”。

我使用下面的代码定义了几条路线。

const myRoutes: Routes = [
{ path: 'register/:token', component: RegisterComponent },
// { path: 'register?token=:token', component: RegisterComponent },
// { path: 'register:token', component: RegisterComponent },
{ path: 'register', component: RegisterComponent },
// ...
]

通过第一个定义的路径，我可以使用“register/mytoken”和“register/?token=mytoken”来获取令牌。

// Token from register/123
this.token = this.route.snapshot.paramMap.get('token')
// Token from register/?token=123
this.route.queryParams.subscribe(params => {
  if (params.token != null)
    this.token = params.token;
});

当我在浏览器中调用网站时尝试直接提供我的令牌作为获取参数时（“register?token=mytoken”），路由器会将我重定向到“/register”而且我无法使用上面的代码获取令牌。但是当我使用“register/?token=mytoken”时，我将被重定向到“register?token=mytoken”并且可以使用令牌。

如何提供访问带有“register?token=123”的页面的路径并检索令牌？

【问题讨论】：

测试了您的代码，它适用于我的 http://localhost:4200/register?token=123 和 http://localhost:4200/register/?token=123。因此，您提供的代码似乎不是问题。但以防万一，您是否尝试更改这些路径的顺序？

标签： angular angular-ui-router angular7

【解决方案1】：

感谢@Gilsdav，我应该自己在一个“干净”的项目中对此进行测试。我从同事那里找到了一段代码，干扰了路由器的get参数：

var loc = window.location.pathname;    
if ((loc == "/register") || (loc == "/"))  {
  this.router.navigate(['/landing']);
}

此重定向会去除 get 参数。我可以通过添加{enableTracing:true} 来验证他的代码的重定向。

imports: [
    RouterModule.forRoot(
      routes,
      { enableTracing: true } // <-- debugging purposes only
    )
]

【讨论】：