角度2のルートに型安全なルートデータを渡す

Question

私のルーティングモジュールでは、この方法でデータを渡しています。私は​​とShowSideBar値を保持し、コンストラクタを介してそれらを初期化しますRouteDataクラスを作成したデータ型が安全にするために

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'では、関数呼び出しはサポートされていません。私の質問は、私はタイプの利点を活用できるように、どのように我々はルートにタイプセーフな方法でRouteDataを渡すことができている

AppRoutingModule

、エクスポートされた関数を参照して 機能やラMBDAを交換 解決のシンボルを考えてみましょう-安全性。あなたは以下を行うことができます

Answer 1

、

は今することができますRoutes

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

からCustomRoute[]へのルートの更新の種類を@angular/routerからルートを拡張して、以下のようなデータの種類を更新し、

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

interface CustomRoute extends Route { 
    data?: RouteData; 
} 

タイプ安全なデータ（下記参照）