Angular 如何修改 DOM？
How does Angular modify the DOM?
想象一下这个模板...
<ul>
<li *ngFor="random"></li>
</ul>
...和一个 MutationObserver "listening" 到它的变化：
observer.observe(this.el, { characterData: true, subtree: true });
现在每次呈现此模板时，观察者都会做出正确反应。
但是当我修改内容"by hand":
时不是
this.el.innerHTML = "<li>Another item</li>";
这可能是因为 Angular 有更巧妙的方法来修改 DOM。
但是 Angular 究竟是如何做到的 - 在一行代码中？特别是 "characterData" 变化被触发了？
正如@wOxxOm 所说，如果您使用 characterData: true 选项，那么仅当您分配给元素的文本节点的 nodeValue
时才会触发更改
Angular 将#comment 节点用于嵌入式视图。
并且angular为这个节点分配了一些元信息
这会导致触发 MutationObserver 中的更改。
想象一下这个模板...
<ul>
<li *ngFor="random"></li>
</ul>
...和一个 MutationObserver "listening" 到它的变化：
observer.observe(this.el, { characterData: true, subtree: true });
现在每次呈现此模板时，观察者都会做出正确反应。 但是当我修改内容"by hand":
时不是this.el.innerHTML = "<li>Another item</li>";
这可能是因为 Angular 有更巧妙的方法来修改 DOM。
但是 Angular 究竟是如何做到的 - 在一行代码中？特别是 "characterData" 变化被触发了？
正如@wOxxOm 所说，如果您使用 characterData: true 选项，那么仅当您分配给元素的文本节点的 nodeValue
Angular 将#comment 节点用于嵌入式视图。
并且angular为这个节点分配了一些元信息
这会导致触发 MutationObserver 中的更改。