Угловая маршрутизация Ленивая загрузка Children's Children

В настоящее время я застрял в том, как работает Angular Routing, и мне нужна помощь. В основном в моем проекте у меня есть один основной модуль, который используется для загрузки всех корневых маршрутов, дом следующий:

const routes: Routes = [
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {path: 'user', loadChildren: 'app/userManagement#UserModule', pathMatch: 'full',canActivate: [AuthGaurd] },
  {path: '**', component: PageNotFoundComponent}
];

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


export class AppRoutingModule {}

И в папке app/userManagement у меня есть index.ts, используемый для импорта, и объявляю все модули:

@NgModule({
  imports: [
    SharedModule,
    UserManagementRoutingModule
  ],
  declarations: [UserHomeComponent, UserListComponent, UserDetailsComponent]
})
export class UserModule {
}

И моя дочерняя маршрутизация помещена в UserManagementRoutingModule:

const routes: Routes = [
  {
    path: '',
    component: UserHomeComponent,
  },
  {
    path: 'userDetails',
    component: UserDetailsComponent
  }
];

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

Таким образом, когда я перехожу к http://hostname/user, он будет направлен на мой компонент UserHomeComponent, однако, если я перейду к http://hostname/user/userDetails Angular не перенаправлял на эту страницу. Как мне отредактировать свой код, чтобы я мог получить доступ к userDetailsComponent?

Спасибо


angular lazy-loading angular-routing
person Terry Zhang    schedule 16.10.2017    source источник

Ответы (1)


arrow_upward
7
arrow_downward

При ленивой загрузке лучше всего определить все маршрутизируемые по пустому пути как дочерние. Кроме того, вам нужно обязательно импортировать CommonModule или BrowserModule в ваши @ngModule (в вашем случае, поскольку это ребенок, вы будете использовать общий).

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    UserManagementRoutingModule
  ],
  declarations: [UserHomeComponent, UserListComponent, UserDetailsComponent]
})
export class UserModule {
}

Приведенное выше обеспечит правильную загрузку компонентов, а приведенное ниже обеспечит оптимальную маршрутизацию.

const routes: Routes = [
  {
    path: '',
    children: [
      { path: '', component: UserHomeComponent },
      { path: 'userDetails', component: UserDetailsComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserManagementRoutingModule {
}
person Z. Bagley    schedule 16.10.2017
comment
Я не думаю, что ваше решение вообще лениво загружается. - person omeralper; 16.10.2017
comment
ах, извините за это, вы только что завершили его код, теперь я понял. - person omeralper; 16.10.2017
comment
Это правильный подход, и на самом деле мне также нужно удалить оператор pathMatch: 'full', и тогда код будет работать правильно. Спасибо! - person Terry Zhang; 16.10.2017
comment
это действительно ленивая загрузка дочерних компонентов? или только родительский? - person Jenuel Ganawed; 09.03.2020
comment
@JenuelGanawed Он лениво загружает UserModule и все компоненты, связанные с этим модулем. Если вам нужна более глубокая отложенная загрузка, вам нужно создать еще один подмодуль и отложенную загрузку аналогичным образом. - person Z. Bagley; 09.03.2020
comment
@ Z.Bagley, о, спасибо, я смог прочитать несколько статей и понял, что для создания ленивой загрузки мне нужно создавать модули и импортировать их в родительские модули как loadChildren, верно? - person Jenuel Ganawed; 10.03.2020