Question

我正在使用Angular 4和Lazy / shared模块进行路由。

这里如何在URL中没有附加懒惰模块名称的情况下使用路径？

目前我的partner组件可通过http://localhost:4200/#/main/partner访问，但我想将其与网址http://localhost:4200/#/partner一起使用。没有将/main附加到我的竞争对手身上。

dashboard，employeelist和addemployee相同，我想直接使用localhost:4200/#/dashboard访问。

以下是我的App-Routing和lazy-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

我假设你知道你不能有相同的路线加载两个不同的东西，所以你需要重组。我可以想到有三种方法可以做到这一点。

选项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加载延迟模块，然后由于懒惰模块中的第一条路线现在是＆＃39;＆＃39;，它将加载合作伙伴组件。但显然这意味着您的信息中心现在是/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);

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

角度路由子懒人模块

2 个答案: