在Angular输入装饰器中使用装饰器

Question

如何使用角度输入属性作为自定义装饰器的参数？

some-component.html

<some-component [key]="'someString'"></some-component>

some.component.ts

export class SomeComponent {
  @Input()
  set key(value: string) {
    @SomeCustomDecorator(value)
  }
}

Answer 1

例如，如果您希望所有输入设置器都有一个log decorator，则可以使用以下decorator/function

function Log(): any {
  return (target: any, propertyKey: string | symbol, propertyDescriptor: PropertyDescriptor) => {
    const key = Symbol();
    return {
      get() {
        return this[key]; 
      },
      set(newValue: any) {
        console.log('decorator: ', newValue);
        this[key] = newValue;
        if (propertyDescriptor) {
          propertyDescriptor.set(newValue);
        }
        return this;
      }
    }
  }
}

它可以用作以下用途：

@Input() @Log() foo;
@Input() @Log() set bar(v) {
  console.log('set bar: ', v);
}

如果您使用@Input() foo或@Input() bar，装饰器将发出以下日志

值装饰器：“”

运行stackblitz