angular2의 경로를 구성하는 가장 좋은 방법은 무엇입니까

Question

angular2의 경로에 대한 질문이 있습니다. 오늘 나는 angular2 공식 튜토리얼과 같은 예제를 사용하고 있습니다.

이

// app.routing.ts 
import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { DashboardComponent } from './dashboard.component'; 
import { HeroesComponent }  from './heroes.component'; 
import { HeroDetailComponent } from './hero-detail.component'; 

const appRoutes: Routes = [ 
    { 
    path: '', 
    redirectTo: '/dashboard', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'dashboard', 
    component: DashboardComponent 
    }, 
    { 
    path: 'detail/:id', 
    component: HeroDetailComponent 
    }, 
    { 
    path: 'heroes', 
    component: HeroesComponent 
    } 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

내 질문은 : 코드는이 (file link) 같은 것입니다. 여러 개의 분지가있는 경우 엔티티 /리스트, 엔티티/추가, 엔티티/편집, 엔티티/쇼와 같은 많은 구성 요소가 있습니다.

그래서 어떻게 해결할 수 있습니까? 지저분한 구성 요소를 만들지 않고도 내 경로를 구성하는 가장 좋은 방법은 무엇입니까?

Answer 1

Routing & Navigation Guide을 따르십시오. 보다 구체적으로, 이러한 부분 :

이 기능 모듈 만들기 (마일스톤 # 2) : 다른 책임을 처리하는 모든 구성 요소는 응용 프로그램의 루트 폴더에 새 폴더를 만들고 거기에 필요한 구성 요소, 라우팅 및 서비스를 넣어 들어 . 그런 다음 모듈을 모두 정의하도록 정의하십시오. 귀하의 경우 entity이라는 새로운 피처 모듈을 만들고 해당 모듈에 필요한 구성 요소를 넣으십시오. 합니다 (Angular2 워드 프로세서에서 촬영) 기능 모듈의 예 :

import { NgModule }  from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 

import { HeroListComponent } from './hero-list.component'; 
import { HeroDetailComponent } from './hero-detail.component'; 

import { HeroService } from './hero.service'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule 
    ], 
    declarations: [ 
    HeroListComponent, 
    HeroDetailComponent 
    ], 
    providers: [ 
    HeroService 
    ] 
}) 
export class HeroesModule {} 

만들기 하위 경로 (마일스톤 # 2) : 현재 기능 모듈에 필요한 경로를 정의하고 각 기능 모듈에 대한 라우팅 파일을 정의 . 다시, Angular2의 문서에서 :

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { HeroListComponent } from './hero-list.component'; 
import { HeroDetailComponent } from './hero-detail.component'; 

const heroesRoutes: Routes = [ 
    { path: 'heroes', component: HeroListComponent }, 
    { path: 'hero/:id', component: HeroDetailComponent } 
]; 

export const heroesRouting: ModuleWithProviders = RouterModule.forChild(heroesRoutes); 

는 끊임없이 변화하는 Angular2의 API

건배에 대한 사실상의 기준이 그대로 Angular2 워드 프로세서, 대부분의 시간을 도울 수 있습니다!