Weitergabe von typsicheren Routendaten an Routen in Winkel 2

Question

In meinem Routing-Modul gebe ich Daten auf diese Weise weiter.

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); 

Um den Datentyp sicher ich eine RouteData Klasse erstellt haben, zu machen, die die ShowTopBar und ShowSideBar Werte halten würde und sie durch einen Konstruktor initialisieren. Jetzt

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

, ich habe die Erklärungen für die Routen in der folgenden Weise geändert:

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)} 

]; 

, die die folgenden Fehler geben zum Kompilieren:

Fehler aufgetreten statisch Symbolwerte zu lösen. Aufruf der Funktion 'RouteData', Funktionsaufrufe werden nicht unterstützt. Betrachten Sie die Funktion ersetzt oder la MBDA mit einem Verweis auf eine exportierte Funktion, Auflösungs Symbol AppRoutingModule

Meine Frage ist, wie wir RouteData in einem typsichere Weise Routen passieren kann, so dass ich den Vorteil dieser Art nehmen -Sicherheit.

Answer 1

Sie können unten tun,

erweitern Route von @angular/router und Update-Datentyp wie unten,

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

interface CustomRoute extends Route { 
    data?: RouteData; 
} 

Fortschreibungsart von Routen zu CustomRoute[] von Routes

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

jetzt können Sie pass Geben Sie sichere Daten ein, siehe unten,

Hoffe, das hilft !!