1

当属性设置为新值时，我希望属性应该更新。所以我所做的是调用，element.requestUpdate()以便我可以获得更新的属性，但 requestUpdate 是异步的。有没有其他方法可以在不调用 requestUpdate 的情况下获取更新的属性？Stackblitz URL => https://stackblitz.com/edit/typescript-nojnqa

LitElement 获取更新的属性

4

1 回答 1

1

属性和属性

实际上，当属性更改时，您不需要手动更新属性： lit-element 具有将属性更改反映到属性的内置功能。

从文档：

您可以配置一个属性，以便每当它发生变化时，它的值都会反映到其观察到的属性中。例如：

// Value of property "myProp" will reflect to attribute "myprop"
myProp: { reflect: true }

在您的示例中，您已经在使用reflect: true，但您在 TS 环境中使用 JS 表示法声明属性。

这个：

static get properties() {
  return {
    name: {
      type: String,
      reflect: true
    }
  }
}

应该是这样的：

@property({
  reflect: true,
})
name: string;

定时

然后有一点时间问题。您输入的这段代码index.html：

<script>
  (async function() {
    const element = document.querySelector('#app').querySelector('hello-name')
    element.name = 'Maria'
    await element.requestUpdate()

    console.log(element.getAttribute('name')) //// result => Maria
  })()
</script>

在自定义元素附加到 dom 之后，但在LitElement 的属性逻辑初始化之前运行。如果您尝试推迟执行此代码，您会发现 LitElement 的属性属性反射将按预期工作。

等待更新

调用element.requestUpdate()不是必需的，因为 setterelement.name = ...已经在后台调用requestUpdate()。

对于这种场景，LitElement 有一个 getter，updateComplete它返回一个在更新周期完成时解析的 Promise。

element.name = 'Maria';
await element.updateComplete;
console.log(element.getAttribute('name')); // Maria

最后，如果您担心async/的使用，await则有多种选择：

  • 将async/await替换为Promise#then()/catch(),
  • 使用setImmediate()/setTimeout()等待更新微任务结束，
  • Event当属性改变时触发。

这是您的 StackBlitz 的一个分支，其中包含一个可能的解决方案。

于 2019-02-25T18:10:47.260 回答