2016-03-21 8 views
9

Chcę wprowadzić Skrollr jako dyrektywę atrybutu Angular2.Dyrektywa Angular2: Jak wykryć zmiany DOM

Tak, format może być:

<body my-skrollr> 
</body> 

Jednak w celu realizacji tego, muszę być w stanie wykryć zmiany w DOM w elementach potomnych poniżej znacznika zawierającego (w tym przypadku <body>), dzięki czemu mogę wywołać skrollr.init(). refresh(); i zaktualizować bibliotekę do pracy z nową zawartością.

Czy istnieje prosty sposób robienia tego, czego nie jestem świadomy, czy podchodzę do tego niepoprawnie?

+1

świetne pytanie !!! –

Odpowiedz

14

Angular nie zapewnia czegoś wbudowanego do tego celu. Możesz użyć MutationObserver, aby wykryć zmiany 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); 
    } 
} 
+0

W konstruktorze MutationObserver powinno to być "mutacje" zamiast "mutacja" –

+0

@AntonNikiforov dzięki :) –

+0

dziękuję za to ... Czy ktoś może mi powiedzieć, co jest przeciwne temu, co by to było ... tj. Wykrycie niczego się nie zmieniło? Jeśli to ma sens. lol Potrzebuję czegoś, aby wyłączyć zmienną. –