具有指定出口的Angular 8.x路由

Question

我尝试在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加载到名为“ toolbar”的出口。但是，它不起作用。

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

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

Answer 1

您应该尝试将主要出口路线和toolbar出口路线放置在相同深度，并为两者设置无组件的父路线，如下所示：