时间戳

首页 > 解决方案 > 何时使用 [name] 与 [attr.name]？

html - 何时使用 [name] 与 [attr.name]？

问题描述

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

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

为什么有些html原生属性可以只用名字修改，而有些则需要通过attr属性修改？

标签： htmlangular

解决方案

（这个答案假设你绑定到一个HTMLElement而不是一个应用内模型对象。鉴于[attr.{name}]-syntax仅支持DOMHTMLElement对象，这个假设应该成立）

使用 DOM 时，某些元素的 DOM 接口为某些 HTML 属性定义了一流/原生属性（如JavaScript 属性）。

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

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

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

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

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

遵循此流程图：

  • 我作为 DOM 接口属性公开后的值是什么？
    • 是的：
      • 利用[propertyName]
    • 不：
      • 我在没有相应 DOM 接口属性的 HTML 属性之后的值？
        • 是：使用[attr.{attributeName}]
        • 不：辞掉你的工作，让其他人来处理快速发展的 JavaScript 开发者生态系统的情绪和精神压力。

推荐阅读