尝试 angular MutationObserver 所以我可以限制 div 的高度答案

【问题标题】：trying angular MutationObserver so I can limit the height of a div尝试 angular MutationObserver 所以我可以限制 div 的高度
【发布时间】：2018-11-26 10:06:42
【问题描述】：

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

我正在使用 angular-split 在其中一个组件中设置可调整的分区。在添加内容或将内容更改为使 div 高度扩展的拆分之一之前，一切都正常工作并且看起来应该如此。当它扩展超出窗口的底部边缘时，周围的拆分会破裂。整个窗口没有设定高度，可以调整大小。将 CSS 与 'overflow: auto' 结合使用，div 仍然会扩展。

我正在尝试捕捉对该 div 的所有更改，以便手动计算并设置正确的高度。

html:

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

component.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。

【问题讨论】：

你能分享一个 plunkr 吗？
MutationObserver 观察 DOM 的变化。您可能需要 ResizeObserver 或 IntersectionObserver。另外，希望您知道，如果没有subtree: true，您只会观察到 this.watchthis.nativeElement 的直接子节点。
@raviteja.kvns 也许您的代码中的其他逻辑有问题。能否请您在stackblitz.com 中提供一个最小的工作代码来展示您的问题

标签： html angular mutation-observers

【解决方案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);
}

【讨论】：

【解决方案2】：

@Mark 我相信您对 Angular 与现代原生浏览器 Javascript 中可用的内容存在根本性的误解。 “MutationObserver”是一个较新的受支持的 JavaScript API 标准，您可以在其中侦听发生的 DOM 突变，然后为您提供查询 DOM 树的机会，并且可以采用更现代、周到、优化和高性能的方式。它实际上是“.setEventListener”的一种替代方法，并且遵循我们在必须求助于 Vue、Angular 或 AngularJS、React、Handlebars （等等）的应用程序中看到的反应性质如您所知）和产品团队正在采用数据驱动的 UI 框架和架构模式，以管理当今时代正在开发的复杂的用户、高效的界面。

现在，为了给出上下文，考虑一下我当前的“MutationObserver”用例。我已经开始使用 jQLite/sizzle 作为 DOM 帮助库构建我自己的超轻量级异步 MVC UI，并内置了我自己的更改检测。 React 使用和 VueJS 使用内部 DOM diff 算法来对抗其专有的内存虚拟 DOM，并使用查找和修补技术来设置/重置/更新视图，基于虚拟树中缺少的视图模型的更改并呈现刚刚存在的内容改变了。 AngularJS 默认使用一种性能较低的技术，即使用轮询间隔轮询“$.scope.vm...”视图模型，该轮询间隔将当前模型与内存中最近“缓存”的版本进行深度比较。如果检测到更改，则更新已引用更改模型的 DOM，然后针对相应更新客户端视图的“脏”模型重新初始化组件生命周期。据我所知，没有人使用性能更高且标准化的 MutationObserver，这就是我编写这个轻量级框架的原因。

【讨论】：