html - 尝试使用 angular MutationObserver 这样我就可以限制 div 的高度

Question

如何捕获 div 的变化？一个设置了 contenteditable 的 div，并且有 [hidden] 元素有时会变得可见。此单页应用布局不应滚动，而应保留在可 window 口区域中。

我正在使用 angular-split 在其中一个组件中设置可调整的分区。一切正常，看起来应该如此，直到将内容添加或更改为使 div 高度扩展的拆分之一。当它扩展到窗口底部边缘之外时，周围的 Splits 就会破裂。整个窗口没有设置高度，可以调整大小。使用带有“溢出:自动”的 CSS，div 仍然会扩展。

我试图捕获对该 div 的所有更改，以便我可以手动计算正确的高度并进行设置。

html:

<div id="detail_container" [ngClass]="infoDisplay" #watchThis>

组件.ts:

@ViewChild("watchThis") watchthis: ElementRef;
ngAfterViewInit() {
  this.observer = new MutationObserver(mutations => {
    mutations.forEach(function(mutation) {
      console.log(mutation.type);
      //height adjustments
    }); 
  });
  var config = { attributes: true, childList: true, characterData: true };
  this.observer.observe(this.watchthis.nativeElement, config);
}

没有错误，但也没有 console.logs。

Answer 1

这可能是范围的问题。尝试从组件方法中调用 console.log()。

@ViewChild("watchThis") watchthis: ElementRef;
ngAfterViewInit() {
  this.observer = new MutationObserver(mutations => {

    this.log('mutations: ', mutations);

    mutations.forEach(function(mutation) {

      this.log('mutation.type: ', mutation.type);

      //height adjustments
    }); 
  });
  var config = { attributes: true, childList: true, characterData: true };
  this.observer.observe(this.watchthis.nativeElement, config);
}

log(caller: string, object: any) {
    console.log(caller, object);
}