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

Posted 2023-02-22

【中文标题】将类型安全的路线数据传递给角度 2 中的路线

【英文标题】：Passing type-safe route data to routes in angular 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 传递给路由，以便我可以利用类型安全。

【参考方案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>

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

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