typescript - Videregivelse af typesikker rutedata til ruter i angular 2

I mit routing-modul sender jeg data på denne måde.

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

For at gøre datatypen sikker har jeg oprettet en RouteData-klasse, som ville indeholde ShowTopBar og ShowSideBar-værdierne og initialisere dem gennem en konstruktør.

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

Nu har jeg ændret erklæringerne for ruter på følgende måde:

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

];

som giver følgende fejl ved kompilering:

Fejl opstod ved statisk afløsning af symbolværdier. Kald af funktionen 'RouteData', funktionskald understøttes ikke. Overvej at erstatte funktionen eller lambdaen med en reference til en eksporteret funktion, afløsning af symbolet AppRoutingModule

Mit spørgsmål er, hvordan vi kan videregive RouteData på en typesikker måde til Routes, så jeg kan udnytte typesikkerhed.

Svar #1

du kan gøre nedenfor,

udvid Route fra @angular/router og opdater Typen af data som nedenfor,

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

interface CustomRoute extends Route {
  data?: RouteData;
}

opdater typen af ruter til CustomRoute[] fra Routes

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

nu kan du sende typesikker data, se nedenfor,

Svar #2

Med udgangspunkt i Madhus svar, hvis du ønsker, at hele din navigationsstruktur skal have disse egenskaber, ikke kun øverste niveau ruterne, skal du også overskrive children-egenskaben på denne måde:

interface CustomRoute extends Route {
  data?: RouteData;
  children?: CustomRoute[];
}

Jeg havde en lignende tilgang som Madhus, men undrede mig over, hvorfor mine børneruter ikke havde intellisense eller typesikkerhed. Så indså jeg, at children-egenskaben stadig var sat til Routes fra rammeværkets definition.

Relaterede artikler