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

Question

我正在尝试开发一个应用程序，其中根模块将显示一个路由器列表 link，这些路由器将加载惰性模块：

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 }
}
];

在这种特殊情况下，管理模块将有两个路由器 link 用于自己声明的组件，一个路由器 link 用于另一个模块（管理英雄）：

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

我可以很好地导航到所有路径，但是如果转到 heroes 并尝试导航到它自己的路线之一（例如零），我会发现找不到页面。英雄路由如下所示：

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 模块就无法访问它们。

这是一个 link stackblitz 重现我的问题 https://stackblitz.com/edit/angular-pm9wsz

谢谢。

Answer 1

当你在路由路径中使用组件时，你定义了一个组件来处理这条路由。 Angular 将只加载该组件。在你的情况下，组件在其他模块中，但是 angular 不会加载其他模块的 none，包括它的路由。

当在路由路径定义中使用 "load children" 时，angular 将延迟加载模块和您的 itens，包括其内部路由。

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

Answer 2

您的错误在于您试图将 crises 和 heroes 视为 AdminComponent 的子路由，但它们与 AdminComponent 处于同一级别。尝试更正您的代码：

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

现在 angular 将匹配您关于基地 / 的路线

admin 到 AdminComponent
admin/crises 到 ManageCrisesComponent
admin/heroes 到 ManageHeroesComponent

来自 angular 官方示例的分支，添加了子路由： https://stackblitz.com/edit/angular-omprkj

Answer 3

在ManageHeroesComponent.html中使用<router-outlet></router-outlet>调用子组件

  {
    path: '',
    children: [
        { path: "" , component: ManageHeroesComponent },
        { path: 'zeroes', component: ManageZerosComponent },
        { path: 'friends', component: ManageFriendsComponent }
    ]
  }
];

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

Angular 6 - Routing to child module of a lazy module not working

routes

lazy-loading

angular