Angular 11：不能使用查询参数答案

【问题标题】：Angular 11: can't use query parametersAngular 11：不能使用查询参数
【发布时间】：2021-10-05 02:14:09
【问题描述】：

当我尝试转到“localhost:4200/reset-password?token=asdsadas”时，Angular 将 url 更改为“localhost:4200/reset-password”，因此，我无法从代码中获取查询参数。

这是我的路由设置：

const routes: Routes = [
  { path: '', redirectTo: '/register', pathMatch: 'full' },
  {
    path: 'login',
    component: LoginComponent,
    canActivate: [AnonymousGuard],
  },
  {
    path: 'register',
    component: RegisterComponent,
    canActivate: [AnonymousGuard],
  },
  {
    path: 'application',
    component: ApplicationFlowComponent,
    children: applicationFlowRoutes,
    canActivate: [AuthGuard],
  },
  {
    path: 'qflow',
    loadChildren: () => import('./questioneer-flow/questioneer-module.module').then((x) => x.QuestioneerModuleModule),
  },
  {
    path: 'reset-password-mail',
    component: ResetPasswordMailComponent,
  },
  {
    path: 'reset-password',
    component: ResetPasswordComponent,
    canActivate: [RequiredQueryParamsGuard],
    data: {
      requiredQueryParams: ['token']
    },
  },
  {
    path: 'oflow',
    component: OverviewAppFlowComponent,
  },
  {
    path: 'decline',
    component: DeclineComponent,
  }
];

【问题讨论】：

你能用localhost:4200/reset-password/?token=asdsadas试试吗？
不，它也重定向到简单的 localhost:4200/reset-password
你检查canActivate了吗？
是的，它不仅发生在一条路线上。它发生在整个应用程序中。
也许这会有所帮助：stackoverflow.com/questions/48552993/…，如果没有。尝试将 url 从reset-password 设置为reset-password/:token 并使用route.params.subscribe 获取它

标签： angular typescript web frontend

【解决方案1】：

在您的路由文件中更改您的重置密码路由，如下所示：-

{
    path: 'reset-password/:token',
    component: ResetPasswordComponent,
    canActivate: [RequiredQueryParamsGuard],
    data: {
        requiredQueryParams: ['token']
    },
}

希望这能解决您的问题。

回复：是的，它不仅发生在一条路线上。它发生在整个应用程序中 - 为了解决这个问题，我建议您参考这个并相应地更改您的路线 - https://www.tektutorialshub.com/angular/angular-passing-optional-query-parameters-to-route/

【讨论】：