HTML 中的属性和 属性 有什么区别？

Question

我为输入元素创建了一个自定义表单控件（使用 ControlValueAccessor），具有以下 writeValue 方法代码。

@ViewChild('inputElement', {static: true}) input;    
writeValue(obj: any): void {
    this.renderer.setAttribute(this.input.nativeElement, 'value', obj);
}

此方法更新视图（输入元素）仅一次，即在我初始化表单时。如果我手动修补与上述组件关联的表单控件的值，表单控件会更新，但视图不会更新。

但是，如果我使用setProperty方法而不是setAttribute方法，如下，

@ViewChild('inputElement', {static: true}) input; 
writeValue(obj: any): void {
    this.renderer.setProperty(this.input.nativeElement, 'value', obj);
}

视图得到更新。

但问题是，文档说 value 是 attribute in HTML，不是 dom 属性.

有人可以解释 HTML 中的属性和 属性 之间的区别是什么使得 Angular 的 Renderer2 中出现这种行为吗？

Answer 1

Angular 文档指出：

HTML attribute vs. DOM property

The distinction between an HTML attribute and a DOM property is key to understanding how Angular binding works. Attributes are defined by HTML. Properties are accessed from DOM, or the Document Object Model, nodes.

A few HTML attributes have 1:1 mapping to properties; for example, id.

Some HTML attributes don't have corresponding properties; for example, aria-*.

Some DOM properties don't have corresponding attributes; for example, textContent.

This general rule can help you build a mental model of attributes and DOM properties: attributes initialize DOM properties and then they are done. Property values can change; attribute values can't.

There is, of course, an exception to this rule because attributes can be changed by setAttribute(), which will re-initialize corresponding DOM properties again.

Comparing <td> attributes to <td> properties provides a helpful example for differentiation. In particular, you can navigate from the attributes page to the properties via "DOM interface" link, and navigate the inheritance hierarchy up to HTMLTableCellElement.

The HTML attribute and the DOM property are not the same thing, even when they have the same name.

附加信息

What is the difference between properties and attributes in HTML?

Answer 2

有一个 属性 以及一个 属性 称为 值，对于 HTML 中的输入元素。

1. 值属性 - 表示输入元素的当前值。
2. 值属性 - 表示输入元素的初始值。

因此，在 HTML 中， 属性 是在 HTML 元素上定义的，并且应该是在创建时传递给它们的初始值那些元素。一旦浏览器创建了 DOM（a.k.a。在呈现页面之后），HTML 元素成为对象（节点对象），因此，它们具有 属性 .

因此，为了使用angular的Renderer2更改输入元素的当前值，您需要使用 set属性 方法。

如果您使用 setAttribute 方法，它只会更改一次值，即在您创建元素时。它不会改变当前值。