如何解决带有延迟加载模块的角度嵌套路由器出口
我正在尝试在另一个路由器插座中创建一个路由器插座作为子导航服务,但尝试了以下方法但它不起作用
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 { }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。