[英]Angular routing child lazy module
我正在將Angular 4與惰性/共享模塊路由一起使用。
在這里,如何在URL中沒有添加我的惰性模塊名稱的情況下使用路徑?
目前,我的partner
組件可通過http://localhost:4200/#/main/partner
但我想將其與URL http://localhost:4200/#/partner
。 無需在我的組件后面附加/main
。
對於dashboard
, employeelist
和addemployee
,我想直接使用localhost:4200/#/dashboard
等訪問。
以下是我的應用程序路由和惰性路由文件。
app.routing.ts
const routes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'emailLogin/forgotpassword', component: ForgotPasswordComponent },
{ path: 'forgotpassword', component: ForgotPasswordComponent },
{ path: 'login', redirectTo: '', component: LoginComponent },
{ path: 'main', loadChildren: './lazy.module#LazyModule' },
{ path: '**', redirectTo: '/main' }
];
export const routing = RouterModule.forRoot(routes, { useHash: true });
lazy.routing.ts
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthguardGuardPartnerUser] },
{ path: 'partner', component: PartnerComponent, canActivate: [AuthguardGuard] },
{ path: 'employeelist', component: EmployeeComponent, canActivate: [AuthguardGuardPartnerUser] },
{ path: 'addemployee', component: AddemployeeComponent, canActivate: [AuthguardGuardPartnerUser] },
{ path: 'newsurvey/:neworcopy', component: NewsurveyComponent, canActivate: [AuthguardGuardAdminPartner] },
// .... Other components
{ path: '404pageNotFound', component: NotfoundComponent },
{ path: '**', redirectTo: '/404pageNotFound' }
];
export const routing: ModuleWithProviders = RouterModule.forChild(routes);
最后我發現只是改變
{ path: '', loadChildren: './lazy.module#LazyModule' },
{ path: '**', redirectTo: '' }
在app.routing.ts
解決了我的問題。
我假設您知道您不能讓同一條路線裝載兩種不同的東西,因此您需要進行重組。 我可以想到3種方法。
選項1
const routes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'emailLogin/forgotpassword', component: ForgotPasswordComponent },
{ path: 'forgotpassword', component: ForgotPasswordComponent },
{ path: 'login', redirectTo: '', component: LoginComponent },
{ path: 'partner', loadChildren: './lazy.module#LazyModule' },
{ path: '**', redirectTo: '/main' }
];
export const routing = RouterModule.forRoot(routes, { useHash: true });
const routes: Routes = [
{ path: '', component: PartnerComponent, canActivate: [AuthguardGuard] },
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthguardGuardPartnerUser] },
{ path: '404pageNotFound', component: NotfoundComponent },
{ path: '**', redirectTo: '/404pageNotFound' }
];
export const routing: ModuleWithProviders = RouterModule.forChild(routes);
這將在/partner
處加載延遲模塊,然后由於延遲模塊中的第一條路由現在為”,因此它將加載伙伴組件。 但這顯然意味着您的儀表板現在是/partner/dashboard
。
選項2
或者,將伙伴組件移出惰性模塊並移入您的應用程序模塊:
const routes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'emailLogin/forgotpassword', component: ForgotPasswordComponent },
{ path: 'forgotpassword', component: ForgotPasswordComponent },
{ path: 'login', redirectTo: '', component: LoginComponent },
{ path: 'partner', component: PartnerComponent, canActivate: [AuthguardGuard] },
{ path: 'main', loadChildren: './lazy.module#LazyModule' },
{ path: '**', redirectTo: '/main' }
];
export const routing = RouterModule.forRoot(routes, { useHash: true });
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthguardGuardPartnerUser] },
{ path: '404pageNotFound', component: NotfoundComponent },
{ path: '**', redirectTo: '/404pageNotFound' }
];
export const routing: ModuleWithProviders = RouterModule.forChild(routes);
選項3
或者只是將合作伙伴組件移到其自己的模塊中:
const routes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'emailLogin/forgotpassword', component: ForgotPasswordComponent },
{ path: 'forgotpassword', component: ForgotPasswordComponent },
{ path: 'login', redirectTo: '', component: LoginComponent },
{ path: 'main', loadChildren: './lazy.module#LazyModule' },
{ path: 'partner', loadChildren: './partner.module#PartnerModule' },
{ path: '**', redirectTo: '/main' }
];
export const routing = RouterModule.forRoot(routes, { useHash: true });
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthguardGuardPartnerUser] },
{ path: '404pageNotFound', component: NotfoundComponent },
{ path: '**', redirectTo: '/404pageNotFound' }
];
export const routing: ModuleWithProviders = RouterModule.forChild(routes);
partner.module.ts
const routes: Routes = [
{ path: '', component: PartnerComponent, canActivate: [AuthguardGuard] },
];
export const routing: ModuleWithProviders = RouterModule.forChild(routes);
我懷疑第三個選項可能最適合,因為它可以使您當前的所有路線保持不變,並且可以提供更大的靈活性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.