모듈의 자식으로 모듈로 라우팅하는 방법 - Angular 2 RC 5

모듈의 자식으로 모듈로 라우팅하는 방법 - 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로 이동하자마자 더 이상 활성화되지 않습니다.employeeURL이지만 여전히 모든 매개 변수에 액세스할 수 있습니다.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