Question

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

我使用以下代码来定义多个路由。

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”访问页面并检索令牌的途径？

Answer 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
    )
]

如何在Angular 7中使用带有路由器的URL获取参数

1 个答案: