Question

我使用角度为7的@ angular / router。

我的目标是在我的一个页面上使用任意数量的（可选）查询参数，尤其是在/ pages / components中

我面临的问题是，每当在URL栏中输入一些查询参数时，我都会被重定向到一个奇怪的位置。如果存在任何查询参数，此重定向将在我的所有页面上发生。

示例：

http://localhost:4200/pages/dashboard（工作正常）
http://localhost:4200/pages/components（工作正常）
http://localhost:4200/pages/dashboard?hello=55&world=77：不起作用。我被重定向到http://localhost:4200/pages/components/lo%3D55&world%3D77

我正在努力从这种重定向中脱颖而出。

看起来第一个查询参数的前三个字母被截断，其余的查询字符串被转义，由于某种原因，我总是以/ pages / components / something结尾，即使我键入的url也是如此是一个完全不同的页面（也许是因为components-page是我唯一在RouterModule上带有参数的页面吗？）。

这是我的路由模块：

const appRoutes: Routes = [
  {path: '', component: LoginPageComponent, runGuardsAndResolvers:'always', pathMatch: 'full'},
  {path: 'pages/components', component: ComponentsPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/classes', component: ClassesPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/components/:id', component: ComponentsPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/dashboard', component: DashboardPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/users', component: UserAdminisitrationComponent, runGuardsAndResolvers: 'always', canActivate: [UserRoleGuardService]},
  {path: 'pages/reports', component: ReportsPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/jobs', component: JobsPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/material', component: MaterialPageComponent, runGuardsAndResolvers: 'always', canActivate: [UserRoleGuardService]},
  {path: '**', redirectTo: '/pages/dashboard', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Answer 1

我在Angular 8中遇到了同样的问题，

我正在这样做：

this.returnUrl = this.route.snapshot.queryParams['returnUrl']
....
this.router.navigate([this.returnUrl]);

当this.returnUrl =“ / my-componenet？x = 4”;例如，我被重定向到“ / my-componenet％3Fx％3D4”。

解决方法是改用NavigationByUrl

我还添加了一个解码URI（以防万一）

this.returnUrl =decodeURI(this.route.snapshot.queryParams['returnUrl'] || '/login')
    ....
    this.router.navigateByUrl(this.returnUrl);

Angular 7：存在查询参数时发生不必要的重定向

1 个答案: