stenciljs - Stencil 对象属性未设置，当它们通过 HTML 字符串提供时

Question

根据文档，Stencil组件的属性myProperty

  @Prop({attribute: "my-prop"})
  public myProperty?: object = {};

应使用此 HTML 代码设置:

  <my-component my-prop="{hello: 'world'}" ></my-component>

但是，它被设置为默认值(空对象)。 bool 值和字符串值工作正常。

这是一个错误，还是我忽略了什么？

Answer 1

Stencil 不会自动解析对象属性。您有两个选择:

1. Set the property using JavaScript
2. 将其设置为 HTML 属性(作为有效的 JSON)和 manually parse it到可以存储在 @State 属性中的对象。

我对手动解析的一个更改是检查它是否真的是一个对象，以防它是使用 JavaScript 设置的。

  @Watch('myObject')
  parseMyObjectProp(newValue: string | object) {
    if (newValue) {
      this.myInnerObject = typeof newValue === 'object' ? newValue : JSON.parse(newValue);
    }
  }