Angular2指令：如何检测DOM变化

Question

Angular2指令：如何检测DOM变化

22

我希望将Skrollr作为Angular2的属性指令来实现。

因此，格式可能是：

<body my-skrollr>
</body>

然而，为了实现这一点，我需要能够检测包含标签（在本例中为<body>）下方子元素的DOM更改，以便我可以调用skrollr.init().refresh();并更新库以适应新内容。

有没有简单直接的方法可以做到这一点，如果有，请告诉我，否则我的方法是否正确？

- Tom Mettam

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Günter Zöchbauer · Accepted Answer

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