모듈의 자식으로 모듈로 라우팅하는 방법 - Angular 2 RC 5
작업 중인 애플리케이션을 최신 Angular 2 릴리즈 후보로 업그레이드하는 중입니다.이 작업의 일환으로 NgModule 사양을 사용하고 애플리케이션의 모든 부분을 모듈로 마이그레이션하려고 합니다.대부분의 경우 라우팅 문제를 제외하고는 이 문제가 매우 잘 해결되었습니다.
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
제 앱은 부모 모듈의 자식으로 여러 모듈이 접착된 모듈의 구성으로 제작됩니다.예를 들어, 알림 모듈, 사용자 모듈 및 전화 모듈(예: 관리 모듈)로 구성된 관리 모듈이 있습니다.이 모듈들의 경로는...
/admin/notifications/my-notifications
/admin/users/new-user
/admin/telephony/whatever
라우터의 이전 릴리스에서는 "아이들"을 사용하여 이 작업을 쉽게 수행할 수 있었습니다.
export const AdminRoutes: RouterConfig = [
{
path: "Admin",
component: AdminComponent,
Children: [
...UserRoutes,
...TelephonyRoutes,
...NotificationRoutes
]
}
]
다른 파일에서는 하위 모듈의 일부로 개별 모듈 경로도 정의합니다.
export const UserRoutes: RouterConfig = [
{
path: "users",
component: userComponent,
children: [
{path: "new-user", component: newUserComponent}
]
}
]
이 모든 것이 아주 잘 작동했습니다.Modules로 업그레이드하는 과정에서 모든 것을 각자의 개별 라우팅 파일로 옮겼기 때문에 이제 이 둘은 이렇게 생겼습니다.
const AdminRoutes: Routes = [
{path: "admin", component: AdminComponent}
]
export const adminRouting = RouterModule.forChild(AdminRoutes)
그리고.
const UserRoutes: Routes = [
path: "users",
component: userComponent,
children: [
{path: "new-user", component: newUserComponent}
]
]
export const userRouting = RouterModule.forChild(UserRoutes)
이 모든 것을 갖춘 상태에서 사용자 라우팅을 가져오는 Users Module과 adminRoutes와 Users Module을 가져오는 AdminModule이 있습니다.UsersModule은 AdminModule의 하위 항목이기 때문에 라우팅이 예전처럼 작동할 것이라고 생각했습니다.안타깝게도 그렇지 않아서 결국 사용자 경로가 단순합니다.
/users/new-user
대신에
/admin/users/new-user
또한 이로 인해 새 사용자 구성요소가 관리 구성요소의 라우터 콘센트에 로드되지 않아 애플리케이션의 스타일링 및 탐색이 중단됩니다.
관리 모듈의 자식으로 사용자 모듈의 경로를 참조하는 방법을 평생 생각해 낼 수 없습니다.이전 방식으로 이 작업을 시도했는데 두 개의 모듈에 있는 경로에 대한 오류가 발생했습니다.이 문서가 새로 공개되었기 때문에, 이 중 일부 사례에 대한 문서는 약간 제한적입니다.
누구나 제공할 수 있는 어떤 도움이라도 대단히 감사하겠습니다!
좋아요, 주말 내내 이걸 만지작거리다가 제가 알아서 하게 됐어요.결국 저에게 효과가 있었던 것은 다음과 같은 것을 하는 것이었습니다.
- :
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
이것들은 수입과 함께 볼 수 있기 때문입니다.을 수행하지 합니다.Component XYZ is defined in multiple modules
.
이 설정에서는 게으른 로드도 잘 작동합니다. 이 경우 하위 경로를 가져오지 않아야 합니다.
저도 같은 문제가 있었습니다.
loadChildren을 사용하면 답이 꽤 좋습니다.
{
path: 'mypath',
loadChildren : () => myModule
}
https://github.com/angular/angular/issues/10958
2.0.0 rc5는 지금 관심이 없는 것 같습니다.하지만 이는 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: () => {...}
. .
자세한 기능은 을 참조하십시오. NgModules 계층 지원 및 Lazy 로딩
저도 이 문제를 해결할 방법을 찾았습니다.기본적으로 예전처럼 경로를 정의하고 있는데 이번에는 최상위 아동 수준입니다.예를 들어 내 관리자 경로:
const AdminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,
children: [
...setupRoutes
]
}
]
export const adminRouting = RouterModule.forChild(AdminRoutes)
내 설정 경로 파일은 하위 영역에서 가져오는데, 하위 영역은 더 많은 하위 영역을 포함하여 자체 경로를 정의합니다.문제점은 이 파일이 라우터 모듈이 아닌 "경로" 개체를 내보낸다는 것입니다.자식 결과의 경우.
그런 다음 하위 모듈 정의에서 하위 및 하위 하위 자식 경로를 제거했습니다.그런 다음, 위에서 언급한 Marcus와 같이 각 하위 모듈에서 경로에 사용되는 모든 구성 요소를 내보내야 했습니다.일단 제가 그렇게 하자, 경로는 제가 원하는 대로 작동하기 시작했습니다.
부모 모듈이 자식 모듈 경로에 대해 너무 많이 알고 있기 때문에 이 솔루션이 별로 마음에 들지 않는 것 같습니다.하지만 적어도 RC5의 경우에는 쉽게 사용할 수 있고, 모든 부품이 사방으로 새지도 않습니다.마커스가 저를 올바른 길로 인도했기 때문에 제가 먼저 가서 마커스의 대답을 대답으로 표시하겠습니다.
저도 이것을 실행할 수 있게 되었고 실제로 계층 구조의 모든 상위 구성 요소를 렌더링해야 하는 경우가 아니라면 제 솔루션이 훨씬 더 훌륭하다고 생각합니다.
제 접근 방식을 이해하는 핵심은 모듈에 아무리 깊게 내포되어 있더라도 모든 경로가 루트 모듈에 추가된다는 것입니다.간단한 예를 들어, 우리가 그들이DepartmentModule
그리고 또EmployeeModule
이 URL을 사용하여 탐색하고자 합니다.
/department/1/employee/2
그 시점에서 2번 직원의 세부사항을 볼 수 있을 겁니다.경로 구성department
인에department.routing.ts
그리고.employee
인에employee.routing.ts
우리가 의도한 대로 작동하지 않을 것이고 당신은 당신이 다음으로 이동할 수 있다는 것을 알게 될 것입니다.
/employee/2
Root Component(뿌리 구성 요소)에서,
/department/1/employee/2
충돌합니다(route을 찾을 수 없음).이 시나리오의 일반적인 경로 구성은 다음과 같습니다.
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']);
}
}
이것이 공식적인 접근 방식이어야 하는지 궁금하지만, 현재로서는 앵귤러 2 팀에서 다음 번에 변경될 때까지 이것이 저에게 효과가 있습니다.
ngModules 및 RC5를 사용하는 경우 부모 모듈의 라우팅 구성은 자식 모듈 라우팅에 대해 알 필요가 없습니다.여기서는 부모 모듈의 경로만 정의하면 됩니다.또한 자식 모듈을 부모 모듈로 가져와야 합니다.자식 모듈에서는 다음과 같은 방법으로 경로를 정의해야 합니다.
export const childRoutes: Routes = [
{
path: 'someChild',
component: SomeChildComponent,
children: [
{ path: '', component: SomeChildSubComponent1 },
{ path: 'comp1', component: SomeChildSubComponent1 },
{ path: 'comp2', component: SomeChildSubComponent2 }
]
}
];
그러면 /someParent/someChild/comp1과 같은 URL이 표시되고 구성 요소가 해당 라우터 출력에 표시됩니다.참고:빈 경로에 대한 구성 요소를 분해해야 합니다.그렇지 않으면 자녀에게 이동할 수 없습니다.
사용하다loadChildren
.괜찮습니다.하지만 빌드 프로세스를 다시 시작하면 빌드 오류가 발생합니다.내보낸 기호를 에 일치시켜야 합니다.loadChildren
.
import { ChildModule } from './child/child.module';
export function childRouteFactory() {
return ChildModule;
}
...
{
path: 'child',
loadChildren: childRouteFactory
}
...
언급URL : https://stackoverflow.com/questions/38879529/how-to-route-to-a-module-as-a-child-of-a-module-angular-2-rc-5
'programing' 카테고리의 다른 글
jQuery 문자열 찾기 및 바꾸기 (0) | 2023.10.15 |
---|---|
자바스크립트를 통해 CSS :hover 효과를 비활성화할 수 있습니까? (0) | 2023.10.15 |
링크하는 동안 전역 변수에 대한 정의되지 않은 참조 (0) | 2023.10.15 |
워드프레스:로그인 페이지에서 "비밀번호 분실" 텍스트를 사용자 정의하려면 어떻게 해야 합니까? (0) | 2023.10.15 |
교리 2에서 날짜 사이의 항목 선택 (0) | 2023.10.15 |