Как проложить маршрут к модулю в качестве дочернего модуля-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)

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

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

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

Я думаю, что 2.0.0 rc5 сейчас не интересует. Но это работает в угловой 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-и компоненты отображаются в их соответствующий маршрутизатор-розетка. Обратите внимание: вы должны деклассировать компонент для пустого пути. Иначе вы не сможете ориентироваться на своих детей.

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

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

/department/1/employee/2

в этот момент мы увидим детали сотрудника 2. Конфигурирование маршруты для department на department.routing.ts и employee in 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
  }
...