Question

如何捕获div的更改？一个具有contenteditable设置的div，并且[隐藏]元素有时会变得可见。此单页应用布局不应滚动，而应保留在可查看的窗口区域中。

我正在使用angular-split在其中一个组件中包含可调分区。在将内容添加或更改为使div高度扩展的Splits之一之前，所有内容都可以正常工作。当它超出窗口的底部边缘时，周围的分裂会破裂。整个窗口不是设定的高度，可以调整大小。使用带有'overflow：auto'的CSS，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。

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);
}

Answer 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，这就是我编写这个轻量级框架的原因。

尝试角度MutationObserver所以我可以限制div的高度

2 个答案: