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

【问题标题】：Passing type-safe route data to routes in angular 2将类型安全的路线数据传递给角度 2 中的路线
【发布时间】：2018-04-20 20:47:19
【问题描述】：

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

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

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

【问题讨论】：

标签： typescript routing angular2-routing

【解决方案1】：

你可以在下面做，

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

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

interface CustomRoute extends Route {
  data?: RouteData;
}

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

我编写了一个小型库，涵盖了标准路由器的所有类型。

ngx-typed-router

它允许您拥有从路由器配置、组件、解析器到测试结束的所有内容的类型。

例如

export const ExampleRoutes: Routes = [
  {
    path: 'test/:id',
    component: ExampleComponent,
    resolve: {
      exampleResponse: ExampleResolveService,
    } as ResolveConfig<ExampleTestRouteData>,
  },
];

export interface ExampleTestRouteQuery {
  param1: string;
}

export interface ExampleTestRoutePath {
  id: string;
}

export interface ExampleTestRouteData {
  exampleResponse: ExampleResponse;
}

组件：

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent {

  constructor(
    @Inject(ActivatedRoute) public route: TypedRoute<ExampleTestRouteData, ExampleTestRoutePath, ExampleTestRouteQuery>,
    // or 
    // @Inject(ActivatedRoute) public route: TypedRoute<ExampleTestRouteData>,
    // all generic types are defaulting to angular standard types
  ) { }

}

和模板：

<div>{{ route.snapshot.data.exampleResponse.id }}</div>
<div>{{ route.snapshot.data.exampleResponse.name }}</div>

所有都是类型安全且可重构的。

查看文档以获取更多示例。

【讨论】：