带有命名插座的 Angular 8.x 路由答案

【问题标题】：Angular 8.x routing with named outlets带有命名插座的 Angular 8.x 路由
【发布时间】：2020-01-06 20:26:46
【问题描述】：

我尝试在 Angular 8.x 应用程序中配置路由，使用延迟加载和命名插座。我有下一个配置：

main-layout.html

<header>
  <app-top-menu></app-top-menu>
</header>
<mat-sidenav-container autosize="true" id="app-main-layout">
  <mat-sidenav opened mode="side">
    <app-left-menu></app-left-menu>
  </mat-sidenav>
  <router-outlet name="toolbar"></router-outlet>
  <div id="app-layout-content">
    <router-outlet></router-outlet>
  </div>
</mat-sidenav-container>

app-router.module.ts

const routes: Routes = [
  {
    path: '', component: MainLayoutComponent, canActivate: [RouteGuardService],
    children: [
      {
        path: 'databases',
        loadChildren: () => import('./feature-modules/database-search/database-search.module')
                              .then(m => m.DatabaseSearchModule)
      }
    ]
  }
];

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

有一个延迟加载的模块路由器：

databases-search-routing.module.ts

const routes: Routes = [
  {
    path: 'index',
    component: DatabaseListComponent,
    children: [
      {
        path: '',
        component: DatabaseListActionsMenuComponent,
        outlet: 'toolbar'
      }
    ]
  },
  {
    path: 'mappings',
    component: MappingsComponent,
    children: [
      {
        path: '',
        component: DatabaseListActionsMenuComponent,
        outlet: 'toolbar'
      }
    ]
  }
];

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

这里的目的是为不同的视图加载不同的工具栏。所以/databases/index 应该将 DatabaseListComponent 加载到“主”路由器出口，将 DatabaseListActionsMenuComponent 加载到命名的“工具栏”出口。但是，它不起作用。

主路由器插座已正确填充，但命名插座未正确填充。我不知道我做错了什么。

本案例的正确配置是什么？

【问题讨论】：

loadChildren: () => import('./feature-modules/database-search/database-search.module') .then(m => m.DatabaseSearchModule) 你不能那样做。你不能把函数放在路由器里。
@mwilson 基于角度文档angular.io/guide/lazy-loading-ngmodules
嗯，这很有趣。

标签： javascript angular angular-router

【解决方案1】：

您应该尝试将主出口路由和toolbar 出口路由放在相同的深度，并为两者都有一个无组件的父路由，如下所示：

const routes: Routes = [{
        path: 'index',
        children: [{
                path: '',
                component: DatabaseListComponent
            }, {
                path: '',
                component: DatabaseListActionsMenuComponent,
                outlet: 'toolbar'
            }
        ]
    }, {
        path: 'mappings',
        children: [{
                path: '',
                component: MappingsComponent
            }, {
                path: '',
                component: DatabaseListActionsMenuComponent,
                outlet: 'toolbar'
            }
        ]
    }
];

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

【讨论】：