Angular2指令:如何检测DOM更改

Tom*_*tam 16 javascript dom typescript skrollr angular

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

因此,格式可能是:

<body my-skrollr>
</body>
Run Code Online (Sandbox Code Playgroud)

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

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

Gün*_*uer 25

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);
  }
}
Run Code Online (Sandbox Code Playgroud)

  • 不要忘记在 `ngOnDestroy()` 方法中调用 `this.observer.disconnect();` (2认同)
  • 使用 nativeElement 与 XSS 无关,只要您不使用它来将用户生成的内容(直接或间接)附加到 DOM。在 Angular 2 开发之初,对“nativeElement”的访问是不受欢迎的,因为它与服务器端渲染和 Web Worker 不兼容,但无论如何它们都没有被广泛使用,只有少数确实需要注意。据我所知,目前的状态是,传递 `nativeElement` 现在与 SSR/WW 兼容,但访问方法或属性则不兼容。 (2认同)