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

Question

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

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

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

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

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

View 得到更新。

但问题是，文档说 value 是 HTML 中的 attribute，而不是 dom property .

谁能解释一下在 Angular 的 Renderer2 中产生这种行为的 HTML 中属性和属性之间的区别是什么？

Answer 1

对于 HTML 中的输入元素，有一个名为 value 的attribute 和一个property。

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

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

因此，为了使用angular的Renderer2改变输入元素的当前值，需要使用setProperty方法。

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