Как Angular модифицирует DOM?

Question

Представьте себе этот шаблон ...

<ul>
    <li *ngFor="random"></li>
</ul>

... и MutationObserver, «слушающий» его изменения:

observer.observe(this.el, { characterData: true, subtree: true });

Теперь каждый раз, когда этот шаблон отображается, наблюдатель правильно реагирует. Но это не , когда я изменяю содержимое «вручную»:

this.el.innerHTML = "<li>Another item</li>";

Вероятно, это связано с тем, что в Angular есть гораздо более умные способы модификации DOM.

Но как именно Angular делает это - в одной строке кода? Тем более, что изменения "characterData" запускаются?

Answer 1

Как сказал @wOxxOm, если вы используете опцию characterData: true, тогда изменения будут срабатывать только в том случае, если вы присваиваете элементу nodeValue текстового узла элемента

Angular использует узел #comment для встроенных представлений.

И angular назначает мета-информацию этому узлу

, который вызывает изменения в MutationObserver.