我有两个模块的应用程序: app.module 和延迟加载的模块 lazy-loaded.module。
我的网址是:
home
users/{userId}/
users/lazy/{id}
users/lazy/{id}/add
users/lazy/{id}/detail
users/lazy/{id}/detail/edit
AppRoutingModule:
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'users',
children [
{ path: ':userId', component: UserComponent },
{ path: 'lazy', loadChildren: './lazy-loaded/lazy-loaded.module#LazyLoadedModule' }
]
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes),
],
exports: [RouterModule],
})
export class AppRoutingModule { }
LazyLoadedRoutingModule:
const routes: Routes = [
{
path: ':id',
children: [
{
path: '', component: LazyHomeComponent
},
{
path: 'add', component: LazyAddComponent
},
{
path: 'detail',
children: [
{
path: '', component: LazyDetailComponent
},
{
path: 'edit', component: LazyDetailEditComponent,
}
]
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LazyLoadedRoutingModule { }
在LazyLoadedModule内部,我想使用不带前缀 users 的url,例如:
<a [routerLink]="['detail', 'edit']">Detail edit</a>
在每个组件中,我都希望有一个共享的组件,可以在延迟加载的模块中导航。是否可以从 users / lazy 创建相对的路由?它应该类似于模块的根目录。