Comment faire pour dissocier l'événement global Angular 2

J'écris une directive dans Angular 2 qui attache un gestionnaire d'événements avec des événements globaux comme l'événement de défilement de fenêtre utilisant l'attribut d'hôte dans la section de métadonnées. Le code est donné ci-dessous:Comment faire pour dissocier l'événement global Angular 2

<html> 
... 
<body> 
    <div listen-to-scroll> 
     Some big fat content is here 
    </div> 
</body> 
<html>

Et le look fichier .ts aime pour listen-to-scroll directive comme suit:

@Directive({ 
    selector: '[listen-to-scroll]', 
    host: { 
    (window:scroll): '_handleScrollEvent($event)' 
    } 
}) 
export class ListenToScrollDirective { 
    _handleScrollEvent(event: Event) { 
     console.log('event occurred'); 
    } 
}

J'ai observé que le gestionnaire de défilement enregistré par la directive était toujours active. Alors, comment se désinscrire de l'écoute de l'événement de défilement? Je m'attends à quelque chose de propre, tout comme l'inscription à l'événement via l'objet hôte.

Source

2017-06-01 Ashish Chopra

il semble qu'il n'y a actuellement aucun moyen de le faire, vérifiez [this] (https://github.com/angular/angular/issues/16366) –

Merci @Maximus. Il semble toujours un problème qui pend. –

Je pense que si vous le manipulez manuellement, vous serez en mesure de supprimer l'écouteur. Effectuez les opérations suivantes:

@Directive({ 
    selector: '[listen-to-scroll]' 
}) 
export class ListenToScrollDirective implements OnInit, OnDestroy { 

    ngOnInit() { 
     window.addEventListener('scroll', this.handleScrollEvent); 
    } 

    ngOnDestroy() { 
     window.removeEventListener('scroll', this.handleScrollEvent); 
    } 

    private handleScrollEvent(event: Event) { 
     console.log('event occurred'); 
    } 

}

La mise en œuvre ci-dessus dans des environnements briser qui ne disposent pas d'un objet window global, donc vous devez gérer cela. Je crois que lorsque vous attachez des écouteurs d'événement dans la propriété hosts, cela est géré pour vous par Angular.

Source

2017-06-01 07:20:13

Eh bien, vous avez raison. Je faisais les choses semblables à ce que vous avez suggéré mais en utilisant la classe Renderer qui est agnostique de plate-forme. Mais je ne veux pas faire cela, je veux tirer parti de l'API hôte car il est beaucoup plus propre et moins de code. –

Comment faire pour dissocier l'événement global Angular 2

Répondre

Questions connexes