Angular2 指令：如何检测 DOM 更改答案

【问题标题】：Angular2 Directive: How to detect DOM changesAngular2 指令：如何检测 DOM 更改
【发布时间】：2016-07-07 22:10:12
【问题描述】：

我想将 Skrollr 实现为 Angular2 属性指令。

所以，格式可能是：

<body my-skrollr>
</body>

但是，为了实现这一点，我需要能够检测包含标记（在本例中为

）下的子元素中的 DOM 中的变化，以便我可以调用 skrollr.init()。刷新（）;并更新库以使用新内容。

是否有一种我不知道的直接方法，或者我的处理方法不正确？

【问题讨论】：

好问题！！！

标签： javascript dom typescript angular skrollr

【解决方案1】：

Angular 没有为此目的提供内置的东西。您可以使用MutationObserver 来检测 DOM 更改。

@Directive({
  selector: '[my-skrollr]',
  ...
})
class MyComponent {
  constructor(private elRef:ElementRef) {}

  ngAfterViewInit() {
    this.observer = new MutationObserver(mutations => {
      mutations.forEach(function(mutation) {
        console.log(mutation.type);
      });   
    });
    var config = { attributes: true, childList: true, characterData: true };

    this.observer.observe(this.elRef.nativeElement, config);
  }
}

【讨论】：

在 MutationObserver 构造函数中，它应该是“mutations”而不是“mutation”
谢谢你...有人能告诉我这会是什么相反的...即检测到没有任何变化吗？如果这是有道理的。大声笑我需要一些东西来关闭变量。
也许您可以检查在特定时间内没有发出任何突变事件？
@ChristianMatthew - 您肯定会简单地将状态设置为“false”，然后在发生变化时更改为 true？
别忘了在ngOnDestroy()方法中调用this.observer.disconnect();