javascript - Angular2 Directive: How to detect DOM changes

Question

Welcome To Ask or Share your Answers For Others

javascript - Angular2 Directive: How to detect DOM changes

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Angular2 Directive: How to detect DOM changes

I want to implement Skrollr as an Angular2 attribute directive.

So, the format may be:

<body my-skrollr>
</body>

However, in order to implement this, I need to be able to detect changes in the DOM in child elements below the containing tag (in this case, <body>), so that I can call skrollr.init().refresh(); and update the library to work with the new content.

Is there a straightforward way of doing this that I'm not aware of, or am I approaching this incorrectly?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T19:19:14+0000

Angular does not provide something built-in for that purpose. You can use MutationObserver to detect DOM changes.

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

Categories

javascript - Angular2 Directive: How to detect DOM changes

javascript - Angular2 Directive: How to detect DOM changes

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags