Renderer został wycofany w Angular 4.0.0-RC.1, przeczytaj aktualizację poniżej

angular2 sposób jest użycie listen lub listenGlobal z Renderer

Na przykład, jeśli chcesz dodać zdarzenie click do komponentu, musisz użyć renderera i ElementRef (daje to również opcję użycia ViewChild lub czegokolwiek, co pobiera nativeElement)

constructor(elementRef: ElementRef, renderer: Renderer) {

    // Listen to click events in the component
    renderer.listen(elementRef.nativeElement, 'click', (event) => {
      // Do something with 'event'
    })
);

Możesz użyć listenGlobal, który da ci dostęp do document, body, itd.

renderer.listenGlobal('document', 'click', (event) => {
  // Do something with 'event'
});

Zauważ, że od wersji beta.2 zarówno listen, jak i listenGlobalzwracają funkcję, która usuwa słuchacz (zobacz sekcję breaking changes W changelog dla wersji beta.2). Ma to na celu uniknięcie wycieków pamięci w dużych aplikacjach (patrz #6686).

Więc aby usunąć detektor dodaliśmy dynamicznie musimy przypisać listen lub listenGlobal do zmiennej, która będzie zawierała zwracaną funkcję, a następnie ją wykonujemy.

// 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();
}

Oto plnkr Z działającym przykładem. Na przykład zawiera użycie listen i listenGlobal.

Używanie RendererV2 z Angular 4.0.0-RC.1+ ^{_{(Renderer2 od 4.0.0-rc.3)}}

• 25/02/2017: Renderer został przestarzały, teraz powinniśmy użyć RendererV2 (patrz linia poniżej). Zobacz commit .

• 10/03/2017: RendererV2 został przemianowany na Renderer2. Zobacz przełomowe zmiany .

RendererV2 nie ma więcej funkcji listenGlobal dla zdarzeń globalnych (document, body, window). Posiada tylko listen funkcję, która spełnia obie funkcje.

W celach informacyjnych kopiuję i wklejam Kod źródłowy implementacji renderera DOM, ponieważ może się on zmienić (tak, jest kanciasty!).

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;
  }

Jak widzisz, teraz sprawdza, czy przekazujemy ciąg znaków (dokument, treść lub okno), w którym to przypadku użyje wewnętrznej funkcji addGlobalEventListener. W każdym innym przypadku, gdy mijamy element (nativeElement) użyje prostej addEventListener

Aby usunąć słuchacza jest tak samo jak z Renderer w angular 2.x. listen zwraca funkcję, a następnie wywołuje tę funkcję.

Przykład

// 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 Z Angular 4.0.0-rc.1 using RendererV2

Plnkr Z Angular 4.0.0-rc.3 using Renderer2