サービスはコンポーネントのテンプレートにアクセスできます

Question

私は2つのサービス（AとB）をお互いに通信していますが、Aは別のものが非同期データを受信したときにグラフを作成する必要があります）。私はそのサービスに成分Aと何をするかにシフトしようとしましたが、私はコンポーネントのテンプレートへのアクセスを取得傾けるように見えます：

@Injectable() 
export class HistoricGraphService { 

... // doing stuff 

    onNewData() { 
    const canvas = <HTMLCanvasElement>document.getElementById('historic-chart'); 
    const ctx = canvas.getContext('2d'); 
    ... building the chart based on datas, timestamp and much more 
    } 
} 

件のデータを中心にイマイチ問題、ときチャート作品作りこのメソッドはコンポーネントAで使用されていますが、なぜ同じプロセスを使用して、テンプレートから要素を取得できないのか理解したいだけです。

Answer 1

私はあなたが次の変更を行う必要があると思う：

1. あなたのサービスはデータのみを取得し、あなたのコンポーネントでは、コンポーネント
2. に戻すための責任を負わなければならない、あなたが直接いけません文書を参照してください。あなたが本当に要素を参照する必要がある場合は、おそらくそうのようにそれをやって行きたいと思います：コンポーネントで

   <canvas #historicChart></canvas> 
   

   ：

   @ViewChild('historicChart') historicChart: ElementRef; 
   

   HTMLで

その後、コンポーネント内のデータを取得した後：

const ctx = (this.historicChart.nativeElement as HTMLCanvasElement).getContext('2d')