Der Renderer ist in Angular 4.0.0-rc.1 veraltet. Lesen Sie das folgende Update
Der Angular2-Weg ist die Verwendung von listenoder listenGlobalvon Renderer
Wenn Sie beispielsweise einer Komponente ein Klickereignis hinzufügen möchten, müssen Sie Renderer und ElementRef verwenden (dies gibt Ihnen auch die Möglichkeit, ViewChild oder alles zu verwenden, was das abruft nativeElement).
constructor(elementRef: ElementRef, renderer: Renderer) {
// Listen to click events in the component
renderer.listen(elementRef.nativeElement, 'click', (event) => {
// Do something with 'event'
})
);
Sie können verwendet werden, listenGlobaldass Sie den Zugang zu document, bodyusw.
renderer.listenGlobal('document', 'click', (event) => {
// Do something with 'event'
});
Beachten Sie, dass seit Beta.2 beide listenund listenGlobaleine Funktion zum Entfernen des Listeners zurückgegeben werden (siehe Abschnitt zum Brechen von Änderungen aus dem Änderungsprotokoll für Beta.2). Dies dient dazu, Speicherlecks in großen Anwendungen zu vermeiden (siehe Nr. 6686 ).
Um den Listener zu entfernen, den wir dynamisch hinzugefügt haben, müssen wir listenoder listenGlobaleine Variable zuweisen , die die zurückgegebene Funktion enthält, und dann führen wir sie aus.
// 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();
}
Hier ist ein Beispiel mit einem Beispiel. Das Beispiel enthält die Verwendung von listenund listenGlobal.
Verwenden von RendererV2 mit Angular 4.0.0-rc.1 + (Renderer2 seit 4.0.0-rc.3)
25/02/2017 : Rendererwurde veraltet, jetzt sollten wir verwenden RendererV2
10/03/2017 : RendererV2wurde umbenannt in Renderer2. Siehe die wichtigsten Änderungen .
RendererV2hat keine listenGlobalFunktion mehr für globale Ereignisse (Dokument, Text, Fenster). Es hat nur eine listenFunktion, die beide Funktionen erfüllt.
Als Referenz kopiere und füge ich den Quellcode der DOM Renderer-Implementierung ein, da er sich möglicherweise ändert (ja, er ist eckig!).
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;
}
Wie Sie sehen können, wird jetzt überprüft, ob eine Zeichenfolge (Dokument, Text oder Fenster) übergeben wird. In diesem Fall wird eine interne addGlobalEventListenerFunktion verwendet. In jedem anderen Fall wird beim Übergeben eines Elements (nativeElement) ein einfaches verwendetaddEventListener
Um den Listener zu entfernen, ist es dasselbe wie Rendererin Angular 2.x. listenGibt eine Funktion zurück und ruft diese Funktion auf.
Beispiel
// 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 mit Angular 4.0.0-rc.1 mit RendererV2
plnkr mit Angular 4.0.0-rc.3 unter Verwendung von Renderer2