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

Question

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

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

应使用以下 HTML 代码进行设置：

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

但是，相反，它被设置为默认值（空对象）。布尔值和字符串值工作正常。

这是一个错误，还是我忽略了一些东西？

Answer 1

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

1. 使用 JavaScript 设置属性
2. 将其设置为 HTML 属性（作为有效的 JSON）并手动将其解析为可以存储在@State属性中的对象。

我总是包含的手动解析的一个更改是检查它是否实际上是一个对象，以防它是使用 JavaScript 设置的。

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