角路由子惰性模块

Question

我正在将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);

Answer 1

最后我发现只是改变

{ path: '', loadChildren: './lazy.module#LazyModule' },
{ path: '**', redirectTo: '' }

在app.routing.ts解决了我的问题。

Answer 2

我假设您知道您不能让同一条路线装载两种不同的东西，因此您需要进行重组。 我可以想到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);

我怀疑第三个选项可能最适合，因为它可以使您当前的所有路线保持不变，并且可以提供更大的灵活性。