Question

我目前在Angular：7.2.14上构建，想看看是否有人可以解释如何使用路由保护程序，共享服务或其他方式等重定向查询参数。

我要解决的问题要求从根Uri路径输入查询参数，然后将路由重定向到正确的子组件，以在路由器更改Uris时保持查询不变。

例如，假设您有一个外部href链接到有角度的应用程序（请参阅下面的路线），并且原始路线href是：domain.com?foo=bar，因为这是'' angular的根路线将路由转移到匹配的子路由''，这又重定向到'login'。最终结果将您带到domain.com/#/login，而我对?foo=bar的查询也丢失了。

如何创建路由，路由保护甚至服务等，并保持原始查询，还可以从根路径将您重定向到domain.com/#/login?foo=bar的最终位置？

const routes: Routes = [
  {
  path: '', component: AuthorizeComponent,
  children: [
    { path: '', redirectTo: 'login'  },
    { path: 'login', component: LoginComponent, canActivate: [LoginGuardService] },
    { path: 'confirm', component: ConfirmComponent, canActivate: [ConfirmGuardService] },
    { path: 'error', component: ErrorComponent },
  ]
}];

我将尝试在此处显示我的设置。我确实有一个实现LoginGuardService的{{1}}，并且在canActivate函数中，我可以使用canActivate重定向查询，使之保持在一起，除非仅当您直接链接到{{ 1}}，而不是根源。

LoginGuardService

router.navigate(['/login'], { queryParams: route.queryParams })

ConfirmGuardService

domain.com/#/login?foo=bar

Answer 1

在导航附加功能（Resource）中设置queryParamsHandling: 'preserve'：

this.router.navigate(['/confirm'], { queryParamsHandling: 'preserve' });

带查询参数的角路由

1 个答案: