Question

我想编写一个日志装饰器，该装饰器在每次调用该函数（装饰器在其中进行装饰）时记录日志。我想记录装饰器接受的键作为参数以及函数发送时使用的参数。

到目前为止，我知道如何编写一个简单的日志函数来记录函数参数但不能接受任何参数：

export function logger(
  target: Object,
  key: string,
  descriptor: PropertyDescriptor
) {
  const original = descriptor.value;
  descriptor.value = function() {
    const targetName = target.constructor.name;
    const args = JSON.stringify(arguments);
    console.log(`Calling ${targetName}.${key} with ${JSON.stringify(arguments)}`);
    const result = original.apply(this, arguments);
    return result;
  };
  return descriptor;
}

我也知道如何编写一个接受参数的装饰器：

log(logData: { value: string; target?: string }) {
    return function(
      target: Object,
      key: string,
      descriptor: PropertyDescriptor
    ) {
      console.log(`Key: ${logData.value}, Target: ${logData.target}`);

    };
  }

因此，您可能会猜到我在这里缺少一个链接，该链接是编写一个日志装饰器，该装饰器可以接受键作为参数，并使用调用装饰函数的参数记录该键。

我这里有两个装饰器的工作示例： https://stackblitz.com/edit/angular-udi-decorators?file=src%2Fapp%2Flogger.ts

Answer 1

所以，我知道了。我的解决方案有效。我想为该函数构建一个装饰器，该装饰器将在每次调用该函数时保存数据。它将为每个功能保存一个唯一的键（它将由装饰器提供），并且还将发送发送给该功能的参数。

logWithData(logData: { value: string; target?: string }) {
    return function logger(
      target: Object,
      key: string,
      descriptor: PropertyDescriptor
    ) {
      const original = descriptor.value;
      descriptor.value = function() {
        const targetName = target.constructor.name;
        const args = JSON.stringify(arguments);
        console.log(`Key: ${logData.value}, Target: ${logData.target}, paramater: ${arguments[0]}`);
        const result = original.apply(this, arguments);
        return result;
      };
      return descriptor;
    };
  }

我还将这段代码放到stackblitz here

上

使用参数创建装饰器并访问装饰的函数参数

1 个答案: