когда использовать [name] против [attr.name]?

Question

Кто-нибудь знает, почему вы можете использовать [id], и вы должны использовать [attr.contenteditable] в качестве привязки свойства в Angular?

Я провел исследование в течение некоторого времени и не могу найти ответ.

Почему некоторые собственные атрибуты html можно изменить только с помощью его имени, а другие нужно изменить с помощью свойства attr?

Answer 1

Из документов

Хотя целевым именем обычно является имя свойства, в Angular существует автоматическое c отображение атрибута на свойство. для нескольких общих атрибутов. К ним относятся class / className, innerHtml / inner HTML и tabindex / tabIndex.

Таким образом, не все атрибуты отображаются в Angular.

Использование префикса attr. будет буквально испускать суффикс в виде строкового атрибута.

Возьмем этот пример:

<div [attr.data-my-attr]="value"></div>

Произведет следующее HTML, предполагая, что свойство компонента value имеет значение 5:

<div data-my-attr="5">
</div>

Почему вы должны использовать [attr.contenteditable]="editable"?

Это не так. Это один из способов выдачи атрибута contenteditable="true". Другой - использовать атрибут Angular [contentEditable]="editable", предполагая, что существует некоторое свойство компонента editable.

<div [contentEditable]="editable"></div>

DEMO: https://stackblitz.com/edit/angular-ujd5cf

Answer 2

(В этом ответе предполагается, что вы привязываетесь к HTMLElement, а не к объекту модели в приложении. Учитывая, что [attr.{name}] -синтаксис поддерживается только для объектов DOM HTMLElement, это предположение должно stand)

При работе с DOM интерфейсы DOM для определенных элементов определяют первоклассные / собственные свойства (как в JavaScript properties ) для определенных атрибутов HTML.

Например, интерфейс DOM HTMLElement определяет первоклассное свойство id, поэтому вы можете напрямую использовать его в выражении привязки: [id]. Точно так же HTMLAnchorElement предоставляет свойство href.

(отмечу, что contenteditable - это определенное свойство интерфейса DOM в WHATWG HTML LS, но не спецификации DOM W3 C, интересно ...)

Однако произвольные (ультрасовременные, определяемые пользователем и устаревшие) атрибуты HTML не предоставляются через интерфейсы DOM и т. д. Доступ к нему возможен только через коллекцию attributes в DOM. Angular требует, чтобы вы использовали [attr.{name}] для атрибутов, отличных от свойств DOM, чтобы он знал, что должен использовать коллекцию attributes вместо того, чтобы предполагать, что он может связываться непосредственно со свойством DOM.

Чтобы ответить Ваш вопрос более прямо:

при использовании [name] vs [attr.name]?

Следуйте этой блок-схеме:

• Является ли значение, которое я выставляю, как свойство интерфейса DOM?
  • Да:
    • Использование [propertyName]
  • Нет:
    • Является ли значение после атрибута HTML без соответствующего свойства интерфейса DOM?
      • Да: используйте [attr.{attributeName}]
      • Нет: оставьте свою работу и позвольте кому-нибудь еще справиться с эмоциональными и психическими стрессами быстро развивающейся экосистемы JavaScript разработчика.

Answer 3

Причина в том, что наиболее распространенные атрибуты HTML имеют специальные свойства @Input в самом angular. Например, id class et c, но для каждого из них слишком много атрибутов, поэтому для более точных c необходимо использовать синтаксис attr.. То же самое происходит с кратким связыванием, например, [style.width.px], вы не можете сделать это с каждым отдельным свойством. Привязки событий имеют похожее поведение. Например, вы можете сказать (keyup.enter), но не (keyup.j). Angular пытается облегчить вашу жизнь, когда это возможно с большинством обычных вещей, но также предоставляет возможность делать и другие вещи. Это также означает, что вы можете сделать, например, [attr.id]=