Как связать значение с атрибутом веб-компонента, используя Angular? - PullRequest
Новая
       35

Как связать значение с атрибутом веб-компонента, используя Angular?

2 голосов
/ 06 февраля 2020

Позвольте мне предвосхитить это, сказав, что я никогда раньше не использовал Angular. Я пытаюсь отладить проблему, с которой сталкивается один из пользователей моей библиотеки веб-компонентов.

У меня есть пользовательский элемент, использующий lit-element, который имеет логическое свойство. Это логическое свойство имеет специальный конвертер атрибутов, который заставляет его рассматривать строку «false» как ложное (в отличие от собственных логических атрибутов html element, где наличие атрибута делает его истинным). Конвертер выглядит так: 

{
  fromAttribute(val) {
    if (val === 'false') {
      return false;
    }
    if (val === '') {
      return true;
    }
    return Boolean(val);
  },
  toAttribute(val) {
    if (!val) {
      return null;
    }
    return '';
  }
}

Насколько я могу судить, Angular имеет 2 способа привязки значения к элементу html в шаблоне:

  1. По атрибуту enabled="{{ enabled }}"
  2. По свойству [enabled]="enabled"

Для нативных элементов, таких как <img>, привязка атрибута работает должным образом - я вижу атрибут, когда я проверьте html.

Для пользовательских элементов атрибуты вообще не устанавливаются - кажется, Angular задает свойство независимо от того, что. Но это строковое значение.

Вот пример стека, который пытается это продемонстрировать: https://stackblitz.com/edit/angular-lit-element-1vz1nf?file=src%2Fapp%2Fapp.component.ts

У меня есть пользовательский компонент <hello-world>, который принимает name и enabled. Если вы проверяете html, имя вообще не устанавливается в качестве атрибута. enabled установлено, но не на то значение, которое я ожидал.

Существует также тег <img>, где src устанавливается правильно.

Имеет ли angular особый случай пользовательских элементов и только когда-либо устанавливают свойства? Это где-то задокументировано? Для меня это похоже на ошибку и нарушает код некоторых людей, которые используют мои пользовательские элементы в Angular.

1 Ответ

3 голосов
/ 06 февраля 2020

Для привязки к атрибутам необходимо использовать привязку [attr.*], в противном случае вы привязываетесь к свойствам элемента или @Input() пользовательского элемента / компонента. В вашем примере это будет выглядеть так: 

<hello-world name="{{ name }}" [attr.enabled]="enabled"></hello-world>

stack

У вас также есть декоратор @Attribute(). Я добавил пример этого в стек. Я не знаю, как это будет выглядеть в пользовательском элементе. Я знаю, что вы не можете делать динамическую привязку к ней. Значение должно быть фиксированным и должно быть строкой

...