Angular自定义装饰器：如何在方法装饰器中获取参数值？

这个问题其实是TypeScript装饰器的常见误区——参数装饰器和方法装饰器的执行时机不同，直接在装饰器工厂里拿不到运行时的参数值。不过我们可以通过元数据+方法包装的组合来实现你的需求，具体方案如下：

1. 实现参数装饰器：标记并存储参数位置 #

首先写一个参数装饰器，用来标记你需要关注的参数，并通过Reflect API把该参数的索引存储到元数据中，关联到对应的方法上：

// 参数装饰器：标记需要跟踪的参数，并记录其索引
export function TrackParam(): ParameterDecorator {
  return (target: Object, propertyKey: string | symbol, parameterIndex: number) => {
    // 自定义元数据key，确保和目标方法唯一绑定
    const metaKey = `__target_param_index__${String(propertyKey)}`;
    // 将参数索引存入元数据
    Reflect.defineMetadata(metaKey, parameterIndex, target, propertyKey);
  };
}

2. 实现方法装饰器：包装原方法获取运行时参数 #

接着编写HttpMethod装饰器，它会读取元数据中存储的参数索引，然后包装原方法，在方法运行时捕获参数值：

// 方法装饰器：包装原方法，获取标记参数的运行时值
export function HttpMethod(): MethodDecorator {
  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
    const originalMethod = descriptor.value;
    // 读取元数据中存储的参数索引
    const metaKey = `__target_param_index__${String(propertyKey)}`;
    const targetParamIndex = Reflect.getMetadata(metaKey, target, propertyKey);

    // 重写原方法，捕获运行时参数
    descriptor.value = function(...args: any[]) {
      // 根据索引获取目标参数的实际值
      if (targetParamIndex !== undefined && args[targetParamIndex]) {
        const paramOneValue = args[targetParamIndex];
        console.log("成功获取paramOne的值:", paramOneValue);
        // 这里可以添加你的业务逻辑，比如把参数值用于HTTP请求配置等
      }

      // 调用原方法，保持原有业务逻辑不变
      return originalMethod.apply(this, args);
    };

    return descriptor;
  };
}

3. 在Angular组件/服务中使用装饰器 #

现在可以在你的Angular代码里按预期方式调用这两个装饰器了：

import { Component } from '@angular/core';
import { HttpMethod, TrackParam } from './decorators';

@Component({
  selector: 'app-demo',
  template: `<button (click)="fetchData('user_1001')">发起请求</button>`
})
export class DemoComponent {
  @HttpMethod()
  fetchData(@TrackParam() paramOne: string) {
    console.log("原方法执行，参数：", paramOne);
    // 这里是你的原有业务逻辑，比如调用HTTP服务
  }
}

关键原理说明 #

• 执行时机差异：装饰器工厂是在类定义阶段执行的，此时方法还未被调用，自然拿不到参数值；只有通过包装原方法，在方法运行时才能捕获到实际传入的args数组。
• 元数据的桥梁作用：参数装饰器负责标记参数的位置（索引），并把索引存入元数据；方法装饰器读取这个索引，就能在运行时从args数组中精准定位到目标参数。
• 上下文保持：重写方法时使用普通function而非箭头函数，确保this指向类的实例，和原方法的上下文一致。

如果需要支持多个参数标记，只需修改元数据存储为数组，记录多个参数索引即可。

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