带有延迟加载模块的角嵌套路由器插座答案

【问题标题】：Angular Nested Router Outlets with Lazy Loaded Modules带有延迟加载模块的角嵌套路由器插座
【发布时间】：2021-08-06 08:55:40
【问题描述】：

我正在尝试在另一个路由器插座内创建一个路由器插座以作为子导航服务，但尝试了以下操作但它不起作用

HomeComponent：

<router-outlet></router-outlet>

MainRouting/AppRouting：

const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'properties', loadChildren: () => import(`./properties/properties.module`).then(m => m.propertiesModule)}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class MainRoutingModule { }

PropertiesComponent

<button [routerLink]="[{ outlets: { properties: ['searchproperties'] } }]">Search Properties</button>
<router-outlet name="properties"></router-outlet>

属性路由：

const routes: Routes = [
    { path: '', component: PropertiesComponent},
    { path: 'searchproperties', loadChildren: () => import(`./searchproperties/searchproperties.module`).then(m => m.SearchpropertiesModule), outlet: "properties"},
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
  
export class PropertiesRouting { }

【问题讨论】：

能否提供stackblitz中的代码？
你可以让你的PropertiesComponent 有一个未命名的routeroutlet，并且在属性路由配置中，有子路由。类似[{ path: '', component: PropertiesComponent, children: [ { path: 'search', loadChildren: ... } ] }]
@Gerald Chifanzwa，如果我这样做，我会丢失子导航菜单
@NewDeveloper 不，您不会，您的子组件将在导航下方的 ProductComponent 中呈现。如果您不使用 { path: '', component: ProductsComponent ... } 将路线指定为路线配置元素的子项，则只会丢失子导航
@Gerald Chifanzwa Gotcha，看起来有效。如果你想创建一个答案，我可以标记它。

标签： angular routes nested router-outlet

【解决方案1】：

只需在你的属性组件中添加你的 routeroutlet

<!--properties.component.html-->
<button [routerLink]="[{ outlets: { properties: ['searchproperties'] } }]">
   Search Properties
</button>
<router-outlet></router-outlet> 
<!--no name on routerOutlet-->

然后在您的属性模块路由中，将 PropertiesComponent 配置为默认路由，并将您的 SearchComponent 作为该路由的子路由，如下所示。

// properties-routing module
const routes: Routes = [
{ 
   path: '', 
   component: PropertiesComponent,
   children: [
       { 
           path: 'searchproperties', 
           loadChildren: () => import(`./searchproperties/searchproperties.module`).then(m => m.SearchpropertiesModule)
       },
       // { ...any other child routes }
   ]
},
];

@NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
}) 
export class PropertiesRouting { }

【讨论】：