Angular 8.x 带命名出口的路由

Question

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

主-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 { }

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

数据库-搜索-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 加载到 'main' 路由器出口，将 DatabaseListActionsMenuComponent 加载到命名的 'toolbar' 出口。但是，它不起作用。

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

这种情况的正确配置是什么？

Answer 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 {}

Angular 8.x 带命名出口的路由

Angular 8.x routing with named outlets

javascript

angular

angular-router