Как перенаправить на панель инструментов, если у вас есть лениво загруженные модули с пустыми путями в Angular?

У меня проблема с маршрутизацией в Angular 9. Это модуль маршрутизации приложения:

const routes: Routes = [
   { path: '', loadChildren: () => HomeModule, canActivate: [AuthGuard] },
   { path: 'login', component: LoginComponent },
   { path: 'register', component: RegisterComponent, canDeactivate: [CanDeactivateGuard] },
   { path: 'payment', component: PaymentComponent },
];

@NgModule({
   imports: [
       RouterModule.forRoot(routes, { enableTracing: true })
   ],
   exports: [RouterModule]
})

export class AppRoutingModule {}

Здесь домашняя маршрутизация из HomeModule загружена лениво:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: 'dashboard', component: DashboardComponent, canActivate: [CloseDrawerGuard] },
      { path: 'zones', component: ZonesComponent, canActivate: [CloseDrawerGuard] },
      { path: 'workplaces', component: WorkplacesComponent, canActivate: [CloseDrawerGuard] },
      { path: 'user_management', loadChildren: () => UserManagementModule },
      { path: 'tenant_management', loadChildren: () => TenantManagementModule },
      { path: 'schedules', component: SchedulesComponent, canActivate: [CloseDrawerGuard] },
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    ]
  }
];


@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})

export class HomeRoutingModule {}

Маршрутизация управления пользователями из модуля UserManagementModule загружается отложенно.

const routes: Routes = [
    { path: '', component: UserManagementComponent,
    children: [
        { path: '', redirectTo: 'list', pathMatch: 'full' },
        { path: 'list', component: UserListManagementComponent, canActivate: [CloseDrawerGuard] },
        { path: 'grid', component: UserGridManagementComponent, canActivate: [CloseDrawerGuard] }
    ]}
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})

export class UserManagementRoutingModule {}

И, наконец, маршрутизация TenantManagementModule (тоже отложенная загрузка).

const routes: Routes = [
    { path: '', component: TenantUpdateComponent, canActivate: [CloseDrawerGuard] },
    { path: 'invoices', component: InvoicesComponent, canActivate: [CloseDrawerGuard] },
    { path: 'subscription', component: SubscriptionComponent, canActivate: [CloseDrawerGuard] },
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})
export class TenantManagementRoutingModule {}

Проблема заключается в том, что когда пользователь вводит базовый URL-адрес (spa/), он должен перенаправляться на spa/dashboard, а не на spa/ и показывает TenantUpdateComponent, поскольку он имеет пустой путь. Но пустой путь должен быть просто оценен, если вы находитесь в маршруте «spa/tenant_management», но не в базовом маршруте «/spa». Он должен перенаправлять на панель инструментов, поэтому я определил этот маршрут в домашней маршрутизации:

{ path: '', redirectTo: 'dashboard', pathMatch: 'full' }

Кроме того, вы можете получить доступ к маршруту «спа/список», но он не должен существовать в маршруте. Это должно работать, если вы введете «spa/user_management/list», если нет, я хочу перенаправить пользователя на панель инструментов.

Заранее спасибо.


person age    schedule 16.10.2020    source источник


Ответы (1)


Вам нужно будет добавить полный маршрут на ваш AppRoutingModule.

{
    // Default all the unmapped URLs to the dashboard as default
    path: '**',
    redirectTo: '/dashboard',
    pathMatch: 'full',
}
person reflexdemon    schedule 16.10.2020
comment
Это не работает. Он по-прежнему показывает TenantUpdateComponent. - person age; 16.10.2020