将类型安全的路由数据传递给角度 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);

为了使数据类型安全，我创建了一个RouteData类将持有ShowTopBar and ShowSideBar值并通过构造函数初始化它们。

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'，不支持函数调用。考虑更换 function 或 la mbda 以及对导出函数的引用， 解析符号 AppRoutingModule

我的问题是我们怎样才能通过RouteData以类型安全的方式传递给路由，以便我可以利用类型安全。

你可以做下面的事情，

延伸路线从@angular/router并更新数据类型，如下所示，

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

interface CustomRoute extends Route {
  data?: RouteData;
}

将路由类型更新为CustomRoute[] from Routes

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

现在您可以传递类型安全数据，见下文，