Дочерний ленивый модуль угловой маршрутизации

Я использую Angular 4 с маршрутизацией для Lazy/shared модуля.

Здесь Как я могу использовать путь без имени моего ленивого модуля, добавленного в URL-адрес?

В настоящее время мой компонент partner доступен с http://localhost:4200/#/main/partner, но я хочу использовать его с URL-адресом 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 });

ленивый.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);

angular angular-routing routing angular4-router
person yogen darji    schedule 07.03.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Наконец я понял, что просто изменить

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

в app.routing.ts решает мою проблему.

person yogen darji    schedule 08.03.2018

arrow_upward
0
arrow_downward

Я предполагаю, что вы знаете, что один и тот же маршрут не может загружать две разные вещи, поэтому вам нужно реструктурировать. Есть 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);

партнер.модуль.тс

const routes: Routes = [
  { path: '', component: PartnerComponent, canActivate: [AuthguardGuard] },
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

Я подозреваю, что третий вариант, вероятно, наиболее подходит, поскольку он сохраняет все ваши текущие маршруты одинаковыми и обеспечивает немного большую гибкость в будущем.

person rmcsharry    schedule 07.03.2018
comment
в Варианте 1, Могу ли я изменить структуру, чтобы использовать /partner для модуля партнера и /dashboard для модуля панели мониторинга? - person yogen darji; 07.03.2018
comment
Да, просто переместите маршрут и компонент /dashboard в модуль вашего приложения и из ленивого модуля. Или создайте модуль информационной панели (что я бы и сделал, так как вы, скорее всего, добавите дополнительные компоненты в модуль информационной панели позже). - person rmcsharry; 07.03.2018