[英]Angular Routing Lazy Load Children's Children
I am currently stuck on how Angular Routing works and need some help.我目前停留在 Angular 路由的工作原理上,需要一些帮助。 Basically in my project, I have one core module which used for loading the all the root routes, the home is following:
基本上在我的项目中,我有一个用于加载所有根路由的核心模块,主页如下:
const routes: Routes = [
{path: '', redirectTo: '/login', pathMatch: 'full'},
{path: 'user', loadChildren: 'app/userManagement#UserModule', pathMatch: 'full',canActivate: [AuthGaurd] },
{path: '**', component: PageNotFoundComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
And in app/userManagement folder I have an index.ts used for imports and declare all the modules:在 app/userManagement 文件夹中,我有一个 index.ts 用于导入并声明所有模块:
@NgModule({
imports: [
SharedModule,
UserManagementRoutingModule
],
declarations: [UserHomeComponent, UserListComponent, UserDetailsComponent]
})
export class UserModule {
}
And my child routing put inside of the UserManagementRoutingModule:我的子路由放在 UserManagementRoutingModule 中:
const routes: Routes = [
{
path: '',
component: UserHomeComponent,
},
{
path: 'userDetails',
component: UserDetailsComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UserManagementRoutingModule {
}
In this way when I go to http://hostname/user it will direct to my UserHomeComponent component, however if i go to http://hostname/user/userDetails Angular didn't redirect to that page.这样,当我 go 到http://hostname/user时,它将定向到我的 UserHomeComponent 组件,但是如果我 go 到http://hostname/user/userDetails Angular 没有重定向到该页面。 How should I edit my code so that I can access the userDetailsComponent?
我应该如何编辑我的代码以便我可以访问 userDetailsComponent?
Thanks谢谢
When lazy loading, best practice is to define all routed under a blank path as children. 延迟加载时,最佳做法是将所有路由在空白路径下定义为子项。 Also, you need to be sure to import
CommonModule
or BrowserModule
in your @ngModule
s (in your case, since it's a child you will use common). 此外,您需要确保导入
CommonModule
或BrowserModule
在@ngModule
秒(在你的情况,因为它是一个孩子,你会使用常见)。
@NgModule({
imports: [
CommonModule,
SharedModule,
UserManagementRoutingModule
],
declarations: [UserHomeComponent, UserListComponent, UserDetailsComponent]
})
export class UserModule {
}
The above will ensure components are properly loaded, and the below will provide best practice routing. 以上将确保组件正确加载,以下将提供最佳实践路由。
const routes: Routes = [
{
path: '',
children: [
{ path: '', component: UserHomeComponent },
{ path: 'userDetails', component: UserDetailsComponent }
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UserManagementRoutingModule {
}
Removing pathMatch: 'full'
in the parent component, solved it for me.删除父组件中的
pathMatch: 'full'
,为我解决了这个问题。 I needed this solution, because i want to have a parent wrapper container, with some view logic, that i don't want to repeat in each child view.我需要这个解决方案,因为我想要一个父包装容器,带有一些视图逻辑,我不想在每个子视图中重复。
Working solution:工作解决方案:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ComponentsDemoComponent } from './components-demo.component';
const routes: Routes = [
{
path: '',
component: ComponentsDemoComponent,
// pathMatch: 'full', <<< REMOVE
children: [
{
path: 'modalv3-demo',
loadComponent: () =>
import('./modalv3-demo/modalv3-demo.component').then(
(c) => c.Modalv3DemoComponent
),
},
],
},
{
path: '**',
redirectTo: '',
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ComponentsDemoRoutingModule {}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.