Renderer est obsolète dans Angular 4.0.0-rc.1, lisez la mise à jour ci-dessous
La méthode angular2 consiste à utiliser listenou à listenGlobalpartir de Renderer
Par exemple, si vous souhaitez ajouter un événement de clic à un composant, vous devez utiliser Renderer et ElementRef (cela vous donne également la possibilité d'utiliser ViewChild, ou tout ce qui récupère le nativeElement)
constructor(elementRef: ElementRef, renderer: Renderer) {
// Listen to click events in the component
renderer.listen(elementRef.nativeElement, 'click', (event) => {
// Do something with 'event'
})
);
Vous pouvez utiliser listenGlobalqui vous donnera accès à document, bodyetc.
renderer.listenGlobal('document', 'click', (event) => {
// Do something with 'event'
});
Notez que depuis la version bêta.2 les deux listenet listenGlobalretournent une fonction pour supprimer l'écouteur (voir la section des changements de rupture du journal des modifications pour la version bêta.2). C'est pour éviter les fuites de mémoire dans les grosses applications (voir # 6686 ).
Donc, pour supprimer l'écouteur que nous avons ajouté dynamiquement, nous devons affecter listenou listenGlobalà une variable qui contiendra la fonction retournée, puis nous l'exécutons.
// listenFunc will hold the function returned by "renderer.listen"
listenFunc: Function;
// globalListenFunc will hold the function returned by "renderer.listenGlobal"
globalListenFunc: Function;
constructor(elementRef: ElementRef, renderer: Renderer) {
// We cache the function "listen" returns
this.listenFunc = renderer.listen(elementRef.nativeElement, 'click', (event) => {
// Do something with 'event'
});
// We cache the function "listenGlobal" returns
this.globalListenFunc = renderer.listenGlobal('document', 'click', (event) => {
// Do something with 'event'
});
}
ngOnDestroy() {
// We execute both functions to remove the respectives listeners
// Removes "listen" listener
this.listenFunc();
// Removs "listenGlobal" listener
this.globalListenFunc();
}
Voici un plnkr avec un exemple de travail. L'exemple contient l'utilisation de listenet listenGlobal.
Utilisation de RendererV2 avec Angular 4.0.0-rc.1 + (Renderer2 depuis 4.0.0-rc.3)
25/02/2017 : Rendererest obsolète, nous devrions maintenant l'utiliser RendererV2
10/03/2017 : a RendererV2été renommé en Renderer2. Voir les changements de rupture .
RendererV2n'a plus de listenGlobalfonction pour les événements globaux (document, corps, fenêtre). Il n'a qu'une listenfonction qui réalise les deux fonctionnalités.
Pour référence, je copie et colle le code source de l'implémentation du DOM Renderer car il peut changer (oui, c'est angulaire!).
listen(target: 'window'|'document'|'body'|any, event: string, callback: (event: any) => boolean):
() => void {
if (typeof target === 'string') {
return <() => void>this.eventManager.addGlobalEventListener(
target, event, decoratePreventDefault(callback));
}
return <() => void>this.eventManager.addEventListener(
target, event, decoratePreventDefault(callback)) as() => void;
}
Comme vous pouvez le voir, il vérifie maintenant si nous passons une chaîne (document, corps ou fenêtre), auquel cas il utilisera une addGlobalEventListenerfonction interne . Dans tous les autres cas, lorsque nous passons un élément (nativeElement), il utilisera un simpleaddEventListener
Pour supprimer l'auditeur, c'est la même chose qu'avec Rendererangular 2.x. listenrenvoie une fonction, puis appelez cette fonction.
Exemple
// Add listeners
let global = this.renderer.listen('document', 'click', (evt) => {
console.log('Clicking the document', evt);
})
let simple = this.renderer.listen(this.myButton.nativeElement, 'click', (evt) => {
console.log('Clicking the button', evt);
});
// Remove listeners
global();
simple();
plnkr avec Angular 4.0.0-rc.1 en utilisant RendererV2
plnkr avec Angular 4.0.0-rc.3 en utilisant Renderer2