如何在 Angular 7 中将 URL 中的 get 参数与路由器一起使用

Question

我对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" 并检索令牌？

Answer 1

感谢 @Gilsdav，我本应该自己在 "clean" 项目中测试它的。从同事那里找了一段代码，干扰了router的get参数：

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

这个重定向去除了 get 参数。我可以通过添加 .

通过他的代码验证重定向

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

如何在 Angular 7 中将 URL 中的 get 参数与路由器一起使用

How can I use get parameter from URL with router in Angular 7

angular

angular-ui-router

angular7