Angular2 指令：如何检测 DOM 变化

Question

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

所以，格式可能是：

<body my-skrollr>
</body>

但是，为了实现这一点，我需要能够检测包含标记（在本例中为）下方的子元素中 DOM 的变化，以便我可以调用skrollr.init().刷新();并更新库以使用新内容。

是否有一种我不知道的直接方法，或者我是否采用了错误的方法？

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

Angular2 指令：如何检测 DOM 变化

Angular2 Directive: How to detect DOM changes

javascript

dom

typescript

skrollr

angular