将类型安全的路线数据传递到角度2中的路线

Question

在我的路由模块中，我以这种方式传递数据。

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类，该类将保存ShowTopBarand ShowSideBar值，并通过构造函数对其进行初始化。

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

现在，我以以下方式更改了Routes的声明：

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”，不支持函数调用。考虑使用对导出函数的引用替换函数或lambda，解析符号AppRoutingModule

我的问题是我们如何RouteData以类型安全的方式传递给Routes，以便我可以利用类型安全。

Answer 1

根据 Madhu 的回答推断，如果您希望整个导航树都具有这些属性，而不仅仅是顶级路由，您还必须children像这样覆盖该属性：

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

我对 Madhu 有类似的方法，但想知道为什么我的子路由没有智能感知或类型安全。然后我意识到该children属性仍然设置为Routes来自框架的定义。

Answer 2

你可以在下面做

扩展路由@angular/router并更新数据类型，如下所示，

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

interface CustomRoute extends Route {
  data?: RouteData;
}

将路线类型更新CustomRoute[]为Routes

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

现在您可以传递Type安全数据，请参见下文，

希望这可以帮助！！