Angular 13路由问题：静态数据与解析数据结合失效

问题原因 #

Angular 13对路由Data类型的类型检查更严格，默认的Data接口未定义你自定义的myParam（来自resolve）和operation属性，因此TypeScript会抛出“Property does not exist on type 'Data'”的错误。

解决方案 #

方案1：类型断言（快速临时解决） #

直接在解构时指定包含自定义属性的类型：

// 替换YourMyParamType为myParam实际的类型，比如resolve返回的实体类型
this.activatedRoute.data.subscribe(({ myParam, operation }: { 
  myParam: YourMyParamType; 
  operation: string 
}) => {
  const myVariable = myParam;
})

方案2：自定义路由数据接口（复用性更高） #

定义包含所有自定义属性的接口，统一在组件中使用：

// 可放在组件文件或单独的类型定义文件中
import { Data } from '@angular/router';

interface MyRouteData extends Data {
  myParam: YourMyParamType;
  operation: string;
  authorities: string[];
  pageTitle: string;
}

// 使用时
this.activatedRoute.data.subscribe((data: MyRouteData) => {
  const { myParam, operation } = data;
  const myVariable = myParam;
})

方案3：全局扩展路由Data类型（多组件复用场景） #

如果多个组件都需要用到这些自定义属性，可全局扩展Angular的Data类型，避免重复断言：

1. 在项目根目录创建或编辑src/app/types.d.ts文件
2. 添加以下代码：

import { Data } from '@angular/router';

declare module '@angular/router' {
  interface Data {
    myParam?: YourMyParamType; // 用?标记为可选，适配不需要该属性的路由
    operation?: string;
    authorities?: string[];
    pageTitle?: string;
  }
}

之后在任何组件中使用activatedRoute.data时，TypeScript都会自动识别这些属性。

注意事项 #

• 替换YourMyParamType为MyComponentResolve实际返回的数据类型，比如你的实体类（如MyComponent）。
• 如果resolve可能返回null或undefined，记得在类型中添加可选标记（?）或在代码中处理空值情况。

内容的提问来源于stack exchange，提问作者Amir Choubani