在 Angular 輸入裝飾器中使用裝飾器

Question

如何使用 Angular Input 屬性作為自定義裝飾器的參數？

一些組件.html

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

some.component.ts

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

Answer 1

例如，如果您想要所有輸入設置log decorator的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 ，裝飾器將發出以下日志：

裝飾者：“價值”

運行堆棧閃電戰