为延迟加载或子模块使用命名路由器出口

Question

我正在尝试加载顶部带有配置栏的页面。每个页面都有不同的配置设置，它们是页面的子级。

我的 app.component.html 有

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

我的 app-routering.module.ts 有

const routes: Routes = [
  { path: 'LastTradedPrices', component: LastTradedPricesComponent }

  { path: 'Slippage/:group', loadChildren: './slippage/slippage.module#SlippageModule' }
];

这是 SlippageComponent 的路线

const slippageRoutes: Routes = [
    { 
        path: '', 
        component: SlippageComponent,
        children: [
            {
                path: '',
                component: ConfigComponent,
                outlet: 'config'
            }
        ] 
    }
];

基本上，我希望默认插座显示来自 SlippageComponent 的页面数据，并将 ConfigComponenet 加载到其上方命名的“配置”插座中。

Answer 1

子组件ConfigComponent在父组件SlippageComponent中寻找router-outlet

对于给定的 app.component.html，如下更改 Slippage 路线。

const slippageRoutes: Routes = [
  {
    path: '',
    component: ConfigComponent,
    outlet: 'config'
  },
  {
    path: '',
    component: SlippageComponent,
  }
];