角路由子懒惰模块

Question

我正在使用 Angular 4 和延迟/共享模块的路由。

如何在 URL 中不附加惰性模块名称的情况下使用路径？

目前我的partner 组件可通过http://localhost:4200/#/main/partner 访问，但我想使用与URL http://localhost:4200/#/partner 相同的组件。无需将 /main 附加到我的组件中。

dashboard、employeelist 和 addemployee 也一样，我想直接用 localhost:4200/#/dashboard 等访问。

下面是我的 App-Routing 和惰性路由文件。

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);

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