首页 文章

Angular 6 - 路由到惰性模块的子模块不工作

提问于
浏览
2

我正在尝试开发一个应用程序,其中根模块将显示将加载延迟模块的路由器链接列表:

const appRoutes: Routes = [
{
 path: 'compose',
 component: ComposeMessageComponent,
 outlet: 'popup'
},
{
 path: 'admin',
 loadChildren: 'app/admin/admin.module#AdminModule',
 canLoad: [AuthGuard]
},
{
 path: 'crisis-center',
 loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
 data: { preload: true }
}
];

在这种特殊情况下,管理模块将为自己声明的组件提供两个路由器链接,为另一个模块提供一个路由器链接(manage-heroes):

const adminRoutes: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        canActivateChild: [AuthGuard],
        children: [
          { path: 'crises', component: ManageCrisesComponent },
          {path: 'heroes', component: ManageHeroesComponent},
          { path: '', component: AdminDashboardComponent }
        ]
      }
    ]
  }
];

我可以很好地导航到所有路径,但如果去英雄并尝试导航到其自己的路线之一(例如零)我得到一个页面未找到 . 英雄路由看起来像这样:

const manageHeroesRoutes: Routes = [
  {
    path: '',
    component: ManageHeroesComponent,
    children: [
        { path: 'zeroes', component: ManageZerosComponent },
        { path: 'friends', component: ManageFriendsComponent }
    ]
  }
];

我注意到如果我将管理路由中的英雄路径替换为:

children: [
  { path: 'crises', component: ManageCrisesComponent },
  {path: 'heroes', loadChildren: 'app/admin/manage-heroes/manage-heroes.module#ManageHeroesModule'},
  { path: '', component: AdminDashboardComponent }
]

我可以访问英雄路线就好了 . 但是我想了解为什么我不能在没有延迟加载ManageHeroes模块的情况下访问它们 .

这是一个链接到stackblitz与我的问题的再现https://stackblitz.com/edit/angular-pm9wsz

谢谢 .

1 回答

  • 0

    在路径路径中使用组件时,可以定义一个组件来处理此路径 . Angular将仅加载该组件 . 在您的情况下,组件位于其他模块中,但angular不会加载其他模块,包括其路径 .

    在路径路径定义中使用“加载子项”时,angular将延迟加载模块和itens,包括其内部路径 .

    https://angular.io/guide/lazy-loading-ngmodules

相关问题