Свойства объекта трафарета не задаются, если они предоставлены через строку HTML

Question

Согласно документации, свойство Stencil компонента myProperty

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

должен быть установлен с помощью этого HTML-кода:

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

Но вместо этого устанавливается значение по умолчанию (пустой объект). Логические и строковые значения работают нормально.

Это ошибка, или я что-то упустил?

Answer 1

Трафарет не анализирует свойства объекта автоматически. У вас есть два варианта:

1. Установите свойство с помощью JavaScript
2. Установите его как атрибут HTML (как действительный JSON) и вручную проанализируйте его для объекта, который вы можете сохранить в @State свойство.

Одно из изменений в ручном разборе, которое я всегда включаю, - это проверка, действительно ли это объект, если он был установлен с использованием JavaScript.

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