延迟加载的路由问题
延迟加载的路由问题
提问于 2016-12-04 13:07:42
我对angular2非常陌生，目前在路由方面遇到了一些奇怪的问题，特别是在延迟加载方面。
我的应用程序分为两个(更多的)布局，为此，我使用了两个组件( PublicComponent和SecureComponent )--这允许我加载完全不同的布局，并组织可伸缩的项目。
在我的路由设置中，我有两个问题：
- 根页面(如：http://myapp.com )正在加载CustomerListComponent而不是HomeComponent，这也绕过了SecureComponent
- 客户/编辑/: id有一个非常奇怪的行为，它加载正确的模板，但是url加载是/customer，组件代码正在生成错误，因为显然没有提供id参数
我的程序-routing.module.ts：
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full'},
{
path: '',
component: PublicComponent,
children: [
{ path: 'login', component: LoginComponent }
]
},
{
path: '',
component: SecureComponent,
canActivate: [LoggedInGuard],
children: [
{ path: 'home', component: HomeComponent },
{ path: 'customer', loadChildren: 'app/customer/customer.module#CustomerModule' }
]
}
];
@NgModule({
imports: [RouterModule.forRoot(APP_ROUTES)],
exports: [RouterModule]
})顾客-路由.模组：
export const CUSTOMER_ROUTES : Routes = [
{ path: '', component: CustomerListComponent },
{ path:'new', component: CustomerEditComponent },
{ path:'edit/:id', component: CustomerEditComponent }
];
@NgModule({
imports: [RouterModule.forChild(CUSTOMER_ROUTES)],
exports: [RouterModule]
})你知道我做错了什么吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-12-04 19:45:20
我刚刚想明白了。我的错误是在懒惰的路由配置中，我也必须指定路径。
在这里，我的工作安排：
app-routing.module.ts
const APP_ROUTES : Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{
path: '',
component: PublicComponent,
children: [
{ path: 'login', component: LoginComponent }
]
},
{
path: '',
canActivate: [LoggedInGuard],
component: SecureComponent,
children: [
{ path: 'home', component: HomeComponent },
{
path: 'customer',
loadChildren: 'app/customer/customer.module#CustomerModule'
}
]
}
];
@NgModule({
imports: [RouterModule.forRoot(APP_ROUTES)],
exports: [RouterModule]
})和我的顾客-路由。模特儿。
export const CUSTOMER_ROUTES : Routes = [{
path: 'customer',
canActivate: [ LoggedInGuard ],
component: SecureComponent,
children: [
{ path: '', component: CustomerListComponent },
{ path:'new', component: CustomerEditComponent },
{ path:'edit/:id', component: CustomerEditComponent }
]
}];
@NgModule({
imports: [RouterModule.forChild(CUSTOMER_ROUTES)],
exports: [RouterModule]
})非常感谢罗曼·C的帮助。
Stack Overflow用户
发布于 2016-12-04 15:58:09
好吧，您用path:''添加了多条路径，这是错误的。想象一下，如果您的网站是www.localhost.com，对于这条路径，您已经将其分配给publicComponent和SecureComponent。
你的应用程序.module.ts应该是这样的.
const APP_ROUTES: Routes = [
{ path: '', redirectTo: 'loginmain', pathMatch: 'full'},
{
path: 'loginmain',
component: PublicComponent,
children: [
{ path: 'login', component: LoginComponent }
]
},
{
path: 'secure',
component: SecureComponent,
canActivate: [LoggedInGuard],
children: [
{ path: '', redirectTo:'home'},
{ path: 'home', component: HomeComponent },
{ path: 'customer', loadChildren: 'app/customer/customer.module#CustomerModule' }
]
}
];
@NgModule({
imports: [RouterModule.forRoot(APP_ROUTES)],
exports: [RouterModule]
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40958975
复制相关文章
相似问题
腾讯云开发者
