Directive Angular2: comment détecter les modifications DOM
Je veux implémenter Skrollr en tant que directive d'attribut Angular2.
Ainsi, le format peut être:
<body my-skrollr>
</body>
Cependant, pour implémenter cela, je dois être en mesure de détecter les changements dans le DOM dans les éléments enfants sous la balise conteneur (dans ce cas, <body>), afin que je puisse appeler skrollr.init (). Refresh () ; et mettez à jour la bibliothèque pour travailler avec le nouveau contenu.
Y a-t-il une façon simple de faire cela que je ne connais pas, ou est-ce que j'aborde mal?
Angular ne fournit aucun élément intégré à cet effet. Vous pouvez utiliser MutationObserver pour détecter les modifications 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);
}
}