Angular2指令:如何检测DOM更改

时间:2016-03-21 11:56:27

标签: javascript dom typescript angular skrollr

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

因此,格式可能是:

<body my-skrollr>
</body>

但是,为了实现这一点,我需要能够在包含标记(在本例中为&lt; body&gt;)下面的子元素中检测DOM中的更改,以便我可以调用skrollr.init() .REFRESH();并更新库以使用新内容。

是否有一种直截了当的做法,我不知道,或者我是否正确接近这个?

1 个答案:

答案 0 :(得分:23)

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