Question

我的自定义HTMLElements中的大多数事件处理程序都是这样的，

  totalChanged() {
    if (!this.shadowRoot) return
    const t = this.shadowRoot.querySelector('#total')
    if (t) t.innerHTML = String(this.price * this.quantity)
  }

是否可以使它看起来像

  @event('#total')
  totalChanged() {
    return String(this.price * this.quantity)
  }

不知道如何在装饰器中找到shadowRoot，this指的是装饰器模块本身，而不是HTMLElement。而proto是我的自定义元素的原型，也不是我想要的this。

export function event(select: string) {
  return (proto: any, propName: string) : any => {
    console.log(this.shadowRoot)
  }
}

此处this尚未定义

export function event(select: string) {
  return function (proto: any, propName: string) : any {
    console.log(this.shadowRoot)
  }
}

编辑：示例

的index.html

<test-2></test-2>
<script src="test2.js"></script>

test2.ts =＆gt; test2.js（目标ES2017）

function defineClass(tagname: string) {
  return function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) {
    console.log("Define: " + constructor.name)
    window.customElements.define(tagname, constructor)
    return class extends constructor {
      newProperty = "decorator";
      hello = "decorator";
    }
  }
}

function myevent(select: string) {
  return function (this:any, proto: any, propName: string, descriptor: PropertyDescriptor) : any {
    let originalMethod = descriptor.value;
    descriptor.value = function(this:any, ...args: any[]) {
      console.log('test', this)
      return originalMethod.apply(this, args) 
    }
    return descriptor;
  }
}

@defineClass('test-2')
class Greeter2 extends HTMLElement{
  property = 'property2'
  hello = 'hello2'
  constructor() {
    super()
    console.log(this.hello)
  }
  @myevent('hello')
  helloFn() {}
  connectedCallback() { }
  disconnectedCallback() { }
  attributeChangedCallback(name: string, oldValue: string, newValue: string) { }
  adoptedCallback() { }
}
console.log('test-2: ', document.querySelector('test-2').hello)

@defineClass('test-3')
class Greeter3 {
  property = 'property3'
  hello = 'hello3'
  constructor() {
    console.log(this.hello)
  }
  @myevent('hello')
  helloFn(){}
}
console.log('test-3: ', new Greeter3());

EDIT2：需要调用方法new Greeter3().helloFn()，请参阅Diullei回答

Answer 1

缺少访问对象上下文的descriptor参数。试试这段代码：

export function event(select: string) {
    return function (proto: any, propName: string, descriptor: PropertyDescriptor) : any {
        let originalMethod = descriptor.value; // saving the original function

        descriptor.value = function(...args: any[]) { // changing the original function body
            console.log(this.shadowRoot);
            return originalMethod.apply(this, args); // calling original function
        }
        return descriptor;
    }
}

this.shadowRoot来自装饰者

1 个答案: