Angular 应用使用了虚拟 DOM 技术来渲染页面。如果使用传统的 Mutation Observer 方法去监测 DOM 的变化，则会发现该方法不起作用。此时，可以使用 Angular 提供的 Renderer2 类来代替 Mutation Observer, 来以更加可靠的方式监测 DOM 变化。

以下是使用 Renderer2 监测 DOM 变化的示例代码：

import { Component, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    Add div
    

  `,
})
export class AppComponent {
  constructor(
    private elementRef: ElementRef,
    private renderer: Renderer2
  ) {}

  addDiv() {
    const dynamicDiv = this.renderer.createElement('div');
    const text = this.renderer.createText('Dynamic div created!');
    this.renderer.appendChild(dynamicDiv, text);
    this.renderer.appendChild(this.elementRef.nativeElement, dynamicDiv);
  }
}

此代码通过使用 Renderer2，监测 DOM 的变化并添加动态的 HTML 元素。 在这个例子中，我们在 AppComponent 类中使用 Renderer2 来添加一个包含文本的 div 元素，当用户点击按钮时，该 div 元素会被添加到 AppComponent 组件的模板中。

使用 Renderer2 的好处是它已经处理了 Angular 应用中的虚拟 DOM，同时它也允许我们以更可预测和更稳定的方式管理 DOM 变化。