рендер был осужден в угловой 4.0.0-радиоуправляемый.1, Прочитайте обновление ниже

The angular2 way использовать listen или listenGlobal С рендерер

например, если вы хотите добавить событие click к компоненту, вы должны использовать Renderer и ElementRef (это дает вам также возможность использовать ViewChild или все, что извлекает nativeElement)

constructor(elementRef: ElementRef, renderer: Renderer) {

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

можно использовать listenGlobal что будет дать вам доступ к document,body и т. д.

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

обратите внимание, что с бета-версии.2 как listen и listenGlobal возвращает функцию для удаления прослушивателя (см. последние изменения раздел из журнала изменений для бета-версии.2). Это делается во избежание утечек памяти в больших приложениях (см. #6686).

поэтому, чтобы удалить прослушиватель, который мы добавили динамически, мы должны назначить listen или listenGlobal к переменной, которая будет содержать возвращенную функцию, а затем мы выполняем оно.

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

здесь plnkr С примером работы. Пример содержит использование listen и listenGlobal.

С помощью RendererV2 с угловой 4.0.0-rc.1+ ^{_{(Renderer2 с 4.0.0-rc.3)}}

• 25/02/2017:Renderer был осужден, теперь мы должны использовать RendererV2 (см. строку ниже). Смотрите commit.

• 10/03/2017:RendererV2 была переименована в Renderer2. Смотрите последние изменения.

RendererV2 больше listenGlobal функции для глобальных событий (документ, тело, окно). Он имеет только listen функция, которая обеспечивает обе функции.

для справки, я копирую и вставляю исходный код рендерера DOM реализация, так как она может измениться (да, это угловой!).

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

как вы можете видеть, теперь он проверяет, передаем ли мы строку (документ, тело или окно), и в этом случае он будет использовать внутренний