将命名的路由器出口用于延迟加载的或子模块

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加载到其上方的命名“ config”插座中。

Answer 1

子组件 ConfigComponent 在父组件 SlippageComponent 中查找路由器出口

对于给定的 app.component.html ，按如下所示更改滑点路线。

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