Question

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

LitElement get updated attribute

Answer 1

属性和属性

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

来自documentation：

您可以配置属性，以便每当其更改时，其值便会反映到其观察到的属性中。例如：
// 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()是不必要的，因为二传手element.name = ...已经在后台调用了requestUpdate()。

在这种情况下，LitElement有一个吸气剂updateComplete，该吸气剂返回一个在更新周期结束时解析的承诺。

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

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

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

Here是StackBlitz的一个分支，提供了可能的解决方案。

当属性设置为新值时，LitElement获取更新的属性值

1 个答案:

属性和属性

计时

等待更新