web-dev-qa-db-ja.com

Angular2ディレクティブ：DOMの変更を検出する方法

Angular2属性ディレクティブとしてSkrollrを実装したいと思います。

したがって、形式は次のようになります。

<body my-skrollr>
</body>

ただし、これを実装するには、包含タグ（この場合は<body>）の下の子要素でDOMの変更を検出できるようにする必要があるため、skrollr.init（）。refresh（）を呼び出すことができます。 ;ライブラリを更新して、新しいコンテンツを操作します。

私が気づいていない、これを行う簡単な方法はありますか、またはこれに間違って取り組んでいますか？

javascriptdomtypescriptangularskrollr
18
Tom Mettam

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);
  }
}
27
Günter Zöchbauer