8

我为输入元素创建了一个自定义表单控件（使用 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是 HTML 中的属性，而不是dom 属性。

有人可以解释在 Angular 的 Renderer2 中产生这种行为的 HTML 中的属性和属性之间有什么区别吗？

4

2 回答 2

12

HTML 中的 input 元素有一个属性和一个名为value的属性。

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

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

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

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

于 2019-07-31T05:32:33.117 回答
3

Angular 文档指出：

HTML 属性与 DOM 属性

HTML 属性和 DOM 属性之间的区别是理解 Angular 绑定如何工作的关键。属性由 HTML 定义。属性是从 DOM 或文档对象模型节点访问的。

一些 HTML 属性与属性具有 1:1 的映射关系；例如，id。

一些 HTML 属性没有对应的属性；例如，aria-*。

一些 DOM 属性没有对应的属性；例如，textContent。

这个一般规则可以帮助你建立属性和 DOM 属性的心智模型：属性初始化 DOM 属性，然后它们就完成了。属性值可以改变；属性值不能。

当然，这条规则有一个例外，因为属性可以通过 更改setAttribute()，这将再次重新初始化相应的 DOM 属性。

<td>将属性与属性进行比较<td>为区分提供了一个有用的示例。特别是，您可以通过“DOM 接口”链接从属性页面导航到属性，并将继承层次结构导航到HTMLTableCellElement.

HTML 属性和 DOM 属性不是一回事，即使它们具有相同的名称。

附加信息

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

于 2019-07-28T04:48:54.897 回答