如何在Angular中实现带参数的方法装饰器并覆写结果

要实现这个能传入参数、覆写方法返回结果的装饰器，核心是保留原方法的逻辑，同时在其基础上用传入的参数处理返回值。具体实现如下：

完整代码示例 #

export class Calculation{
    @multiply(2)
    addOne(number: number) {
        return number + 1;
    }        
}

function multiply(param1: number) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        // 保存原方法的引用，避免被覆盖后丢失
        const originalMethod = descriptor.value;
        
        // 重写方法的执行逻辑
        descriptor.value = function(...args: any[]) {
            // 调用原方法，获取原始计算结果
            const originalResult = originalMethod.apply(this, args);
            // 用装饰器传入的参数处理结果并返回
            return originalResult * param1;
        };
        
        return descriptor;
    };
}

测试验证 #

调用以下代码会输出预期的6：

console.log(new Calculation().addOne(2));

关键细节说明 #

• 用originalMethod.apply(this, args)调用原方法，保证原方法的this上下文与原本一致，避免指向错误
• ...args接收原方法的所有参数，让装饰器可以适配任意参数数量的方法
• 装饰器的参数param1会被内层函数通过闭包捕获，因此在重写的方法中可以直接使用

内容的提问来源于stack exchange，提问作者subhash .net cool