Хорошо, после вожения с этим к лучшему часть выходных я получил его работающий на моем конце. То, что работало на меня в конце, должно было сделать следующее:
Routes
для каждого модуля Вы хотите направить. Не импортируйте ни один из RouterModule.forChild()
в дочерних модулях. import
ключевое слово) весь дочерний элемент направляет, как обычно, и использование ...
оператор для слияния их под корректным путем. Я не мог добраться, это для работы с дочерним модулем, определяющим путь, но имеющим его на родителе, хорошо работает (и совместимо с ленивой загрузкой). В моем случае у меня было три уровня в иерархии как это:
/
) editor/:projectId
) <ул.> <литий> Запрос (query/:queryId
) литий> <литий> Страница (page/:pageId
) литий> ул.> about
) следующие определения работают на меня для эти /editor/:projectId/query/:queryId
путь:
// app.routes.ts
import {editorRoutes} from './editor/editor.routes'
// Relevant excerpt how to load those routes, notice that the "editor/:projectId"
// part is defined on the parent
{
path: '',
children: [
{
path: 'editor/:projectId',
children: [...editorRoutes]
//loadChildren: '/app/editor/editor.module'
},
]
}
маршруты редактора похожи на это:
// app/editor/editor.routes.ts
import {queryEditorRoutes} from './query/query-editor.routes'
import {pageEditorRoutes} from './page/page-editor.routes'
{
path: "", // Path is defined in parent
component : EditorComponent,
children : [
{
path: 'query',
children: [...queryEditorRoutes]
//loadChildren: '/app/editor/query/query-editor.module'
},
{
path: 'page',
children: [...pageEditorRoutes]
//loadChildren: '/app/editor/page/page-editor.module'
}
]
}
И заключительная часть для QueryEditor похож на это:
// app/editor/query/query-editor.routes.ts
{
path: "",
component : QueryEditorHostComponent,
children : [
{ path: 'create', component : QueryCreateComponent },
{ path: ':queryId', component : QueryEditorComponent }
]
}
Однако для создания этой работы генерал Editor
потребности импортировать и экспортируют QueryEditor
и QueryEditor
потребности экспортировать QueryCreateComponent
и QueryEditorComponent
, поскольку они видимы с импортом. При отказе сделать это получит Вас ошибки вроде [1 118].
Уведомление, что ленивая загрузка также хорошо работает с этой установкой, в этом случае дочерние маршруты, не должно быть импортировано, конечно.
Я думаю, что 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: () => {...}
. Это не ленивая загрузка.
Видят детали подвиг: Поддерживайте иерархию NgModules без Ленивой Загрузки
Используйте loadChildren
. Это в порядке. Но когда Вы перезапускаете процесс сборки, Вы получите ошибку сборки. Необходимо соответствовать экспортируемому символу к loadChildren
.
import { ChildModule } from './child/child.module';
export function childRouteFactory() {
return ChildModule;
}
...
{
path: 'child',
loadChildren: childRouteFactory
}
...
У меня была та же проблема.
ответ здесь является довольно хорошим использованием loadChildren:
{
path: 'mypath',
loadChildren : () => myModule
}
Я заставил это работать также и если Вы на самом деле не должны представлять все родительские компоненты в иерархии, я думаю, что мое решение намного более изящно.
ключ к пониманию моего подхода - то, что все маршруты, неважно, как глубоко вложенный в модулях добавляются к корневому модулю. Быстрый пример, скажем, мы имеем DepartmentModule
и EmployeeModule
, по которому мы хотели бы переместиться к использованию этого URL
/department/1/employee/2
, в которой точке мы будем видеть сотрудника 2 детали. Конфигурирование маршрутов для department
в department.routing.ts
и employee
в [1 111] будет не , прокладывают себе путь, мы предназначили, и Вы заметите, что можно перейти к [1 120]
/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
был бы импортирован [1 113]. Теперь, как я сказал, который не работает, к сожалению.
Однако только с единственным изменением это будет:
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']);
}
}
интересно, как ли это, предполагается, официальный подход, но на данный момент это работает на меня до следующего изменения повреждения от Угловых 2 команд.
Я нашел способ разрешить это также. В основном я определяю свои маршруты способ, которым я привык для, но на этот раз на главном дочернем уровне. Например, мой администраторский маршрут:
const AdminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,
children: [
...setupRoutes
]
}
]
export const adminRouting = RouterModule.forChild(AdminRoutes)
Мой файл маршрутов установки импортируется из sub области, которая определяет маршруты сами по себе, включая большее количество детей. Выгода - то, что этот файл экспортирует объект "Маршрутов" а не результат RouterModule.forChild.
После этого установка, я удалил дочерние и поддочерние маршруты из определений подмодуля. Я затем должен был экспортировать все компоненты, используемые в маршрутах от каждого из подмодулей, точно так же, как Marcus упомянул выше. После того как я сделал это, маршруты начали работать точно так же, как я хотел их к.
я не думаю, что мне действительно нравится это решение, так как мой родительский модуль знает слишком много о дочерних маршрутах модуля. Но по крайней мере простой способ обойти его для RC5, и он не пропускает все мои компоненты повсеместно. Я буду идти вперед и отмечать ответ Marcus как ответ, так как он поместил меня на правильном пути.
При использовании 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 компонент для пустого пути. Иначе Вы не можете провести Вам по детям.