带有延迟加载模块的角度嵌套路由器出口

问题描述

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

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 { }

属性组件

<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 { }

解决方法

只需在属性组件中设置路由器插座

<!--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 { }