Angular 2 route с параметром действует как подстановочный маршрут - PullRequest
Новая
       4

Angular 2 route с параметром действует как подстановочный маршрут

0 голосов
/ 13 мая 2018

У меня есть угловое приложение с несколькими модулями, каждый из которых определяет некоторые маршруты.

Приложение (базовый модуль) использует этот AppRoutingModule: 

const routes: Routes = [
  {path: 'user', loadChildren: 'app/user/user.module#UserModule'},
  {path: 'exchange', loadChildren: 'app/exchange/exchange.module#ExchangeModule'},
  {path: 'home', component: HomeComponent},
  {path: '', redirectTo: '/home', pathMatch: 'full'},
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Маршрутизатор пользовательского модуля: 

@NgModule({
  imports: [RouterModule.forChild(
    [{
      path: '', component: UserComponent,
      children: [
        {path: '', component: UserProfileComponent, canActivate: [AuthGuardService]},
        {path: 'login', component: UserLoginComponent},
        {path: 'register', component: UserRegisterComponent},
        {path: 'confirm/:confirmcode', component: UserConfirmMailComponent},
        {path: 'logout', component: UserLogoutComponent}
      ]
    }]
  )],
  exports: [RouterModule]
})
export class UserRoutingModule {
}

Маршрутизатор модуля обмена: 

@NgModule({
  imports: [RouterModule.forChild(
    [{
      path: '', component: ExchangeComponent,
      children: [
        {path: '', component: ExchangeListComponent},
        {path: ':exchange-name', component: ExchangeDetailComponent},
        {path: ':exchange-name/:baseCode', component: ExchangeSelectionComponent},
        {path: ':exchange-name/:baseCode/:targetCode', component: ExchangePairComponent},
      ]
    }]
  )],
  exports: [RouterModule]
})
export class ExchangeRoutingModule {
}

Теперь я могу использовать маршрут http://localhost:4200/exchange/Sample/Base для доступа к компоненту ExchangeSelectionComponent, как и ожидалось.

Но когда я перехожу на http://localhost:4200/user/confirm/ и случайно пропустил добавление обязательного параметра confirmcode, вместо Invalid-Route-Error я получаю тот же ExchangeSelectionComponent -рорт, что и выше. Также, когда я пытаюсь открыть http://localhost:4200/thispagedoesnotexist, я получаю ExchangeDetailComponent с exchange-name = thispagedoesnotexist.

Кажется, что все ниже /exchange/ также сопоставляется с базовым корнем /.

Почему это так и как я могу избежать такого поведения? Я думал, что каждый маршрут, определенный в маршруте внутри routeChildren, загружается только лениво, когда к соответствующему родительскому маршруту обращаются и до тех пор даже не касаются.

Я использую Angular 5.2. Заранее спасибо за любой вклад.

1 Ответ

0 голосов
/ 14 мая 2018

Я предполагаю, что ExchangeModule импортирован в app.module и, следовательно, его определение маршрута разрешается вместо ленивых загруженных. 

path: '', component: ExchangeComponent

Убедитесь, что модули загружены и не импортированы в app.module, это можно проверить, быстро проверив файл app.module или проверив вкладку сети и ищите новые загруженные чанки при доступе к маршруту, который должен быть lazyloaded, если новый чанк не был загружен, тогда ваш модуль был импортирован в app.module и не был lazyloaded.

...