Angular2 Directive: Comment détecter les changements DOM

Je veux mettre en œuvre Skrollr comme un Angular2 attribut de la directive.

Donc, le format peut être:

<body my-skrollr>
</body>

Toutefois, afin de mettre en œuvre la présente, j'ai besoin d'être en mesure de détecter les changements dans les DOM dans les éléments enfants au-dessous de la balise contenant (dans ce cas, <body>), de sorte que je peux appeler skrollr.init().refresh(); et la mise à jour de la bibliothèque pour travailler avec le nouveau contenu.

Est-il un moyen simple de faire ce que je ne suis pas au courant, ou suis-je aborder cette question de façon incorrecte?

  • la grande question!!!
InformationsquelleAutor Tom Mettam | 2016-03-21
  1. 23

    Angulaire ne fournit pas quelque chose de construit pour ce but. Vous pouvez utiliser MutationObserver pour détecter les DOM changements.

    @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);
  }
}
    • Dans MutationObserver constructeur qu'il doit être "mutations" au lieu de "mutation"
    • merci 🙂
    • merci pour cette... quelqu'un Peut me dire wha th contraire de ce que ce serait... c'est à dire la détection rien n'a changé? si cela fait sens. lol j'ai besoin de quelque chose pour désactiver la variable.
    • Peut-être vous pouvez vérifier qu'aucune mutation de l'événement a été émise pour un montant spécifique de temps?
    • Sûrement, il vous suffit de définir un état de "faux" et alors il suffit de changer de vrai quand quelque chose change?
    InformationsquelleAutor Günter Zöchbauer