何时使用 [名称] 与 [attr.name]?

Question

>有谁知道为什么你可以使用[id]并且你必须使用[attr.contenteditable]作为Angular中的属性绑定？

我已经研究了一段时间，但找不到答案。

为什么有些 html 原生属性可以只用它的名字来修改，而另一些则需要通过 attr 属性进行修改？

Answer 1

(此答案假设您绑定到HTMLElement而不是应用内模型对象。鉴于[attr.{name}]-语法仅支持 DOMHTMLElement对象，此假设应该成立)

使用 DOM 时，某些元素的 DOM 接口为某些 HTML 属性定义一等/本机属性(如JavaScript 属性)。

例如，HTMLElementDOM 接口定义了一类属性id，这就是为什么你可以直接在绑定表达式中使用它：[id]。同样，HTMLAnchorElement公开href属性。

(我注意到contenteditable是WHATWG HTML LS 中定义的 DOM 接口属性，但不是 W3C 的 DOM 规范，有趣......

但是，任意(超现代、用户定义和过时的)HTML 属性不会通过 DOM 接口公开，因此只能通过 DOM 中的attributes集合进行访问。 Angular 要求你对非 DOM 属性使用[attr.{name}]，以便它知道它必须使用attributes集合，而不是假设它可以直接绑定到 DOM 属性。

要更直接地回答您的问题：

何时使用 [名称] 与 [attr.name]？

遵循以程图：

• 我追求的值是否公开为 DOM 接口属性？
  • 是的：
    • 使用[propertyName]
  • 不：
    • 我追求的值是没有相应 DOM 接口属性的 HTML 属性吗？
      • 是：使用[attr.{attributeName}]
      • 不：辞掉你的工作，让别人处理快速发展的JavaScript开发人员生态系统的情绪和精神压力。

Answer 2

来自文档

虽然目标名称通常是属性的名称，但在 Angular 中，对于几个常见属性，有一个自动的属性到属性映射。其中包括class/className，innerHtml/innerHTML和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"属性的一种方法。另一种方法是使用角度属性[contentEditable]="editable"，假设存在某些组件属性editable。

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

演示：https://stackblitz.com/edit/angular-ujd5cf

Answer 3

原因是因为大多数常见的 HTML 属性在角度本身中具有特殊的@Input属性。 例如idclass等，但是有太多的属性可以为每个属性提供这个，所以那些更具体的属性需要你使用attr.语法。速记装订也会发生同样的事情，例如[style.width.px]，你不能对每个属性都这样做。事件绑定具有类似的行为。例如，您可以说(keyup.enter)但不能说(keyup.j)。Angular 试图让您的生活更轻松，因为它可以处理最常见的事情，但它也提供了做其他事情的选项。 这也意味着您可以做例如[attr.id]=