将窗口 MutationObserver 与 Angular HostBinding 一起使用时，选项卡崩溃

问：

在将 MutationObserver 添加到我的应用程序时，我遇到了一个非常奇怪的错误。 我的一个 Angular 组件是将 HostBinding 用于元素的 attr.style 属性，这与我注入页面的突变观察器（来自另一个 js 文件）一起工作，直到几天前我将 attributes 标志设置为 true 突变观察器，然后选项卡完全崩溃并陷入循环。 我不确定为什么，突变观察者不应该引起或触发任何新事件，它应该只观察，所以我不明白监听页面中元素的属性会导致它，除非它做的不仅仅是听？

我设置了一个快速演示，有 2 个 HostBindings，第一个与问题无关，主要问题是绑定到 attr.style。 如果要重新创建 bug，请将观察者的 attributes 标志设置为 true。

https://stackblitz.com/edit/angular-hostbinding-class-demo-ud5m8g?file=src%2Fapp%2Fhello.component.ts

任何帮助将不胜感激，谢谢！

我试图将属性标志设置为false，它确实有帮助，我只是不明白为什么。我需要继续使用那个标志。另一种选择是删除该绑定，稍后手动设置该 css 规则。

@Component({
  selector: 'hello',
  template: `<h1 >This is a {{name}}!!!</h1>
  <button (click)='activate()'>Activate</button>`,
  styles: [
    `
   h1 { font-family: montserrat;}`,
  ],
})
export class HelloComponent implements OnInit {
  @Input() name: string;
  toggle: boolean;
  toogle: boolean;

  @HostBinding('class.Current')
  get t() {
    console.log('getter-toggle function called');
    return this.toggle;
  }
  @HostBinding('attr.style')
  public get cssVariables() {
    console.log('getter-cssRules function called');
    const cssVariables = `
    --sq-color: blue
    `;
    return this.sanitizer.bypassSecurityTrustStyle(cssVariables);
  }

  constructor(private sanitizer: DomSanitizer) {}

  activate() {
    this.toggle = !this.toggle;
    console.log(this.toggle);
  }

  ngOnInit() {
    let observer = new MutationObserver(this.logChanges);

    observer.observe(window.document.documentElement, {
      childList: true,
      subtree: true,
      attributes: false, // Switch this to true if you want to crash the tab
    });
  }

  logChanges(records, observer) {
    for (const record of records) {
      console.log(record);
    }
  }
}