Как проложить маршрут к модулю в качестве дочернего модуля-Angular 2 RC 5

У меня была та же проблема.

ответ здесь довольно хорош, используя loadChildren:

          {
             path: 'mypath',
             loadChildren : () => myModule
          }

https://github.com/angular/angular/issues/10958

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

const AdminRoutes: Routes = [
   {
      path: 'admin',
      component: AdminComponent,
      children: [
          ...setupRoutes
      ]
   }
]

export const adminRouting = RouterModule.forChild(AdminRoutes)

мой файл маршрутов установки импортируется из подзоны, которая определяет собственные маршруты, включая больше детей. Уловка заключается в том, что этот файл экспортирует объект "Routes", а не RouterModule.результат forChild.

после того, как это настроено, я удалил дочерние и дочерние маршруты из определения подмодулей. Затем мне пришлось экспортировать все компоненты, используемые в маршрутах, из каждого из подмодулей, как Маркус упоминал выше. Как только я это сделал, маршруты начали работать так, как я хотел.

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

Я думаю, что 2.0.0 rc5 сейчас не интересует. Но is работает в Angular 4, может быть, тоже рано.

@NgModule({
    imports: [
        RouterModule.forRoot([
                {path: "", redirectTo: "test-sample", pathMatch: "full"},
                {
                    path: "test-sample",
                    loadChildren: () => TestSampleModule
                }
        ])
    ],
    exports: [RouterModule],
    declarations: [] 
}) 
export class AppRoutingModule{}

@NgModule({
    imports: [
        RouterModule.forChild([{
                    path: "",
                    component: TestSampleComponent,
                    children: [
                        {path: "", redirectTo: "home", pathMatch: "full"},
                        {
                            path: "home",
                            loadChildren: () => HomeModule
                        },
                        {
                            path: "about",
                            loadChildren: () => AboutModule
                        }
                    ]
                }
        ])
    ],
    exports: [RouterModule],
    declarations: []
})
export class TestSampleRoutingModule {}

@NgModule({
    imports: [RouterModule.forChild([{
                    path: "",
                    component: AboutComponent
                }
    ])],
    exports: [RouterModule]
})
export class AboutRoutingModule {}

учитывать на loadChildren: () => {...}. Это не ленивая загрузка.

Посмотреть подробнее feat: поддержка иерархии NgModules без ленивой загрузки

когда вы используете ngModules и RC5, конфигурация маршрутизации вашего родительского модуля не должна ничего знать о маршрутизации дочерних модулей. Вам нужно только определить маршруты для вашего родительского модуля здесь. Кроме того, вы должны импортировать дочерний модуль в родительский модуль. В дочернем модуле вы должны определить свои маршруты следующим образом:

export const childRoutes: Routes = [
  {
    path: 'someChild',
      component: SomeChildComponent,
      children: [
        { path: '', component: SomeChildSubComponent1 },
        { path: 'comp1', component: SomeChildSubComponent1 },
        { path: 'comp2', component: SomeChildSubComponent2 }
      ]
  }
];

Это позволит вам иметь url-адрес, как /someParent / someChild / comp1 - и компоненты отображаются в их соответствующий маршрутизатор-розетка. Обратите внимание: вы должны declace компонент на пустой путь. Иначе вы не сможете ориентироваться на вас, дети.

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

ключ к пониманию моего подхода заключается в том, что все маршруты, независимо от того, как глубоко вложенные в модули добавляются к основному модулю. Быстрый пример, скажем, у нас есть DepartmentModule и EmployeeModule который мы хотели бы перейти к использованию этого URL

/department/1/employee/2

в этот момент мы увидим детали сотрудника 2. Конфигурирование маршруты для department на department.routing.ts и employee на employee.routing.ts будет не работайте так, как мы намеревались, и вы заметите, что вы можете перейти к

/employee/2

из корневого компонента, в то время как

/department/1/employee/2

рухнет (путь не найден). Типичная конфигурация маршрута в этом сценарии будет выглядеть следующим образом:

export const departmentRoutes: Routes = [
    { path: 'department', component: DepartmentComponent, children: [
        { path: '', component: DepartmentsComponent },
        { path: ':id', component: DepartmentDetailsComponent }
    ]}
];

export const employeeRoutes: Routes = [
    { path: 'employee', component: EmployeeComponent, children: [
        { path: '', component: EmployeesComponent },
        { path: ':id', component: EmployeeDetailsComponent }
    ]}
];

и EmployeeModule будет импортирован DepartmentModule. Как я уже сказал, это, к сожалению, не работает.

однако, с всего одно изменение:

export const employeeRoutes: Routes = [
    { path: 'department/:id/employee', component: EmployeeComponent, children: [
        { path: '', component: EmployeesComponent },
        { path: ':id', component: EmployeeDetailsComponent }
    ]}
];

подвох в том, что DepartmentModule больше не принимает активного участия, как только вы переходите к employee URL, но вы все еще можете получить доступ к каждому параметру ActivatedRoute:

export class EmployeeDetailsComponent {
    departmentId: number;
    employeeId: number;
    constructor(route: ActivatedRoute) {
        route.parent.params.subscribe(params =>
            this.departmentId= +params['id'])
        route.params.subscribe(params => 
            this.employeeId= +params['id']);
    }
}

интересно, должен ли это быть официальный подход, но пока это работает для меня до следующего изменения от команды Angular 2 .

использовать loadChildren. Все нормально. Но при перезапуске процесса сборки вы получите ошибку сборки. Вы должны сопоставить экспортированный символ с loadChildren.

import { ChildModule } from './child/child.module';

export function childRouteFactory() {
  return ChildModule;
}

...
  {
    path: 'child',
    loadChildren: childRouteFactory
  }
...