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

Posted 2023-03-13

【中文标题】为延迟加载或子模块使用命名路由器出口

【英文标题】：Use named router-outlet for a lazy loaded or child module

【发布时间】：2019-01-14 16:22:51

【问题描述】：

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

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

【参考方案1】：

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

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

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