延迟加载辅助路由

Question

这里的场景， 我有一个包含 3 条路由的主页（每个懒加载主页的子页面）。

这里的辅助组件有一个主出口和另一个辅助

<router-outlet name="auxone"></router-outlet>

这就是我的 mainpage.route 文件的样子

现在我的辅助路由加载完美，我能够在主插座路由有任何问题。但是，一旦我尝试像这样在辅助插座中加载路线

并尝试使用

导航它们

（辅助路线有一个孩子作为自己的，我试图加载另一条路线作为同一个辅助的另一个孩子） 我得到错误：

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'mainpage/aux'

由于我无法看到任何有关如何加载和路由辅助路由的文档，因此我不知道如何进行延迟加载。

我到底哪里出错了？

这是我的项目结构

Answer 1

您没有做错任何事情，这只是 Angular 路由器中的一个长期存在的错误，在 angular@6.1 中（部分）得到了修复。部分原因是，为了实现您的目标，您必须将应用程序路由中的延迟加载模块配置为未命名路由，而不是在延迟加载模块路由器配置中命名父路由：

app.routes

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    /* no name for lazy loaded route */
    path: '',
    loadChildren: './home/home.module#HomeModule'
  },
  {
    /* you can add multiple empty routes without conflicts */
    path: '',
    loadChildren: './about/about.module#AboutModule'
  }
];

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

home.routes

export const homeRoutes: Routes = [
  {
    /* your lazy loaded module route needs to be named */
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: '',
        component: HomeListComponent
      },
      {
        path: 'form',
        component: HomeFormComponent,
        outlet: 'popup'
      }
    ]
  }
];

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

而您的主组件模板看起来像这样：

<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>

routerLink 必须是这样的

[routerLink]="['/home', { outlets: { popup: ['form'] } }]"

Answer 2

您不应该也不能在延迟加载路径中包含outlet: 参数。延迟加载的路由被设计为隐藏在急切加载的应用程序之外。

相反，您应该为 outlet 组件构建一个模块，并且它应该有自己的路由配置。在该路由器配置中，您可以设置到辅助插座的路由。