如何通过自定义装饰器记录@Input@Output值的值。

Posted 2021-04-19

我试图通过简单地提供使用一个自定义的装饰器来记录我的组件的每一个输入（输入）和输出（输出）的值。我只是没有达到我可能读出一些值的地步。

自定义装饰器

function Log() {
  return (target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log('this: ', this) // this: undefined
    console.log('target: ', target) // target: Object { constructor: f FooComponent() }
    console.log('propertyKey: ', propertyKey) // propertyKey: source
    console.log('descriptor: ', descriptor) // descriptor: undefined
    return descriptor;
  }
}

组成部分

export class FooComponent  {
  // This observable just emits 'one', 'two' and 'three' one by one.
  public source$ = of(['one', 'two', 'three']).pipe(
    mergeMap(identity)
  )

  // Wanted usage (if possible)
  @Output() @Log() source = this.source$;
}

控制台中的预期输出

one
two
three

该 @Output() 装饰器仍然可以工作，我得到了从 FooComponent. 但我不知道如何读出通过这个装饰器的变量，甚至从它那里读取值。我已经尝试了下面的正文 Log:

• this[propertyKey] (在此我收到一个错误，因为无法读取未定义的属性)
• target[propertyKey] (在这里我只是收到未定义的)

以防你需要一个测试设置。stackblitz

答案

感谢@FanCheung，他的文章参考给了我正确的知识来构建装饰器。

日志装饰器

function Log(): any {
  return (target: any, propertyKey: string | symbol) => {
    const key = Symbol();
    return {
      get() {
        return this[key]; 
      },
      set(newValue: Observable<any>) {
        console.log(newValue);
        this[key] = newValue.pipe(
          tap(v => console.error(`${String(propertyKey)}: `, v))
        );
      }
    }
  }
}

使用方法

// Class with decorator usage
class Foo {
  private readonly source$ = of('baz');
  @Output() @Log() source = this.source$
}

// Usage of Foo as <foo>
<foo (source)="..."></foo>

// Expected output
source: baz

解释

关于实际发生的事情，可以在文章中找到深刻的见解。装修公司的工作并不像你想象的那样.