使用插值时，Angular 是只更新一个 DOM 元素还是所有 DOM 元素

Question

假设我在 Angular2(或 4(中有一个具有以下视图模板的子组件：

<div id="firstDiv">
<div id="secondDiv">
<span> {{someproperty}}</span>
<div>
</div>

someproperty是由父组件使用@input绑定对子组件进行修改。当 @input 属性的值更改时，子视图的重新呈现是在 id 为firstDiv的div 上进行还是仅在<span>级别进行？ 换句话说，整个显示的结构是刷新，还是只刷新span或只是跨度中的文本？

Answer 1

只有span元素内的文本节点才会使用渲染器进行更新。以下是来自源代码的相关代码片段：

if (checkAndUpdateBinding(view, nodeDef, bindingIndex, newValue)) {
value = text + _addInterpolationPart(...);
view.renderer.setValue(DOMNode, value);
}

DOMNode这里是对 textNode 的引用。

有关更多详细信息，请阅读 Angular 中 DOM 更新的机制