サービスからレンダラーにアクセス

Question

サービスをウィンドウ上のクリックイベントのコールバックを登録しようとしています。私は自分のコードから直接グローバルウィンドウオブジェクトにアクセスしたくないです。代わりにレンダラーを使用してグローバルリスナーを登録しようとしましたが、レンダラーのプロバイダがないというブラウザでは失敗します。私はコンポーネントで使用しますが、サービスで使用することはできません。これを達成するための好ましい方法は何ですか？ここで

は私の現在の作業アプローチである：ここで

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class MyService { 
    constructor() { 
    Observable.fromEvent(window, 'click').subscribe(() => console.log('window click received')); 
    } 
} 

は私がやりたいものですが、それは失敗します。

import { Injectable, Renderer } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { Observer } from 'rxjs/Observer'; 

@Injectable() 
export class MyService { 
    constructor (private renderer: Renderer) { 
    let clickEvent = new Observable<Event>(
     (observer: Observer<Event>) => { 
     this.renderer.listenGlobal('window', 'click', (evt: Event) => 
      { 
      observer.next(evt); 
      }) 
     }); 
    clickEvent.subscribe(() => console.log('window click received')); 
    } 
} 

Answer 1

あなたがサービスにRendererFactory2を通過して、新しいインスタンスを作成することができますレンダラー2の：

import { Injectable, RendererFactory2, Renderer2 } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { Observer } from 'rxjs/Observer'; 

@Injectable() 
export class MyService { 
    private renderer: Renderer2; 

    constructor (rendererFactory: RendererFactory2) { 
    this.renderer = rendererFactory.createRenderer(null, null); 
    let clickEvent = new Observable<Event>(
     (observer: Observer<Event>) => { 
     this.renderer.listenGlobal('window', 'click', (evt: Event) => 
      { 
      observer.next(evt); 
      }) 
     }); 
    clickEvent.subscribe(() => console.log('window click received')); 
    } 
}