[英]Angular Nested Router Outlets with Lazy Loaded Modules
I am trying to create a router-outlet inside another router-outlet to service as sub navigation, but tried the below and its not working我正在尝试在另一个路由器插座中创建一个路由器插座以作为子导航服务,但尝试了以下操作但它不起作用
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>
PropertiesRouting :属性路由:
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 { }
Just have your routeroutlet in your properties component只需将您的路由器插座放在您的属性组件中
<!--properties.component.html-->
<button [routerLink]="[{ outlets: { properties: ['searchproperties'] } }]">
Search Properties
</button>
<router-outlet></router-outlet>
<!--no name on routerOutlet-->
Then in your properties module routing, configure PropertiesComponent at the default route, and your SearchComponent as a child of that route, as below.然后在您的属性模块路由中,将 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 { }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.