Angular：如何从自定义装饰器获取ElementRef

Question

我正在Angular5中实现Host CSS变量绑定的装饰器。 但是，我不能很好地实现以下代码。我可以从装饰器定义ElementRef吗？

export function HostCssVariable(cssVariableName?: string): any {
  return (target, propertyKey: string, descriptor: PropertyDescriptor) => {
    let _value: any;
    return {
      set: function(value) {
        // this.el is defined by TestComponent's constructor
        // Can I define ElementRef in decorator?
        this.el.nativeElement.style.setProperty(`--${cssVariableName}`, value);
        _value = value;
      },

      get: function() {
        return this.el.nativeElement.style.getProperty ?
          this.el.nativeElement.style.getProperty(`--${cssVariableName}`): _value
      },

      enumerable: true,
      configurable: true,
    }
  }
}


@Component({
  selector: 'test-component',
  templateUrl: ...,
  styleUrls: [...]
})
export class TestComponent {

  @HostCssVariable('hoge')
  public hoge: number = 2;

  constructor(private el: ElementRef) { }
}

谢谢。

Answer 1

我不认为有一种方法可以将组件的ElementRef注入到您的自定义装饰器中，因为您的装饰器是属性装饰器，而不是类装饰器。