2017-11-08 9 views
0

내 라우팅 모듈에서이 방식으로 데이터를 전달합니다. 나는 ShowTopBarShowSideBar 값을 보유하고 생성자를 통해 초기화 것 RouteData 클래스를 생성 한 데이터 형식을 안전하게하기 위해각도 2의 경로에 유형 안전 경로 데이터 전달

const routes: Routes = [ 
    { path: '', redirectTo: 'login', pathMatch: 'full' }, 
    { path: 'login', component: LoginComponent, data: { ShowTopBar: true, showSideBar: false} }, 
    { path: 'error', component: ErrorComponent, data: { ShowTopBar: true, showSideBar: false}} 

]; 
export const AppRoutingModule: ModuleWithProviders = RouterModule.forRoot(routes); 

.

export class RouteData { 
constructor(showTopbar: boolean, showSideBar: boolean) { 
    this.ShowSideBar = showSideBar; 
    this.ShowTopBar = showTopbar; 
} 
public ShowTopBar: boolean; 
public ShowSideBar: boolean; 
} 

지금, 나는 다음과 같은 방법으로 경로에 대한 선언을 변경 : 다음과 같은 오류를주고있다

const routes: Routes = [ 
    { path: '', redirectTo: 'login', pathMatch: 'full' }, 
    { path: 'login', component: LoginComponent, data: new RouteData(false, false) }, 
    { path: 'error', component: ErrorComponent, data: new RouteData(true, false)} 

]; 

컴파일에 :

오류 정적 심볼 값을 해결 발생했습니다. 함수 호출 'RouteData', 함수 호출이 지원되지 않습니다. 기호 AppRoutingModule를 해결, 내 보낸 함수에 대한 참조 을 기능이나 라 MBDA 교체를 고려

내 질문에 내가 유형을 활용할 수 있도록 우리가 경로에 형태 보증 된 방법으로 RouteData을 통과 할 수있는 방법입니다 -안전.

답변

1

아래 수행 할 수

지금 Routes

const routes: CustomRoute[] = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent, data: { ShowSideBar: true, ShowTopBar: true } } 
]; 

을 수행 할 수 있습니다에서, @angular/router 아래 같은 데이터의 업데이트 유형에서 CustomRoute[]에 경로

export interface RouteData { 
    ShowTopBar: boolean; 
    ShowSideBar: boolean; 
} 

interface CustomRoute extends Route { 
    data?: RouteData; 
} 

업데이트 유형을 경로를 확장 패스 유형 데이터 (아래 참조)

enter image description here

희망이 도움이됩니다!