服务是否可以访问组件的模板

我有两个服务（A和B）在彼此之间进行通信，A必须在另一个服务接收到异步数据时创建图表（这些数据在其他地方使用，因此B是独立的）。我试图转移我做什么与组分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 
    } 
}

问题心不是周围的DATAS，制作图表时工作这个方法在组件A中使用，我想知道为什么我不能使用相同的过程从我的模板中获取元素。

来源

2017-09-01 Quentin Laillé

不是本身，而是可以注入组件和组件的服务可以传递给服务，但这不应该是必需的。访问模板应该由组件完成。只需从服务向组件发送关于应该执行的操作的命令 –

我认为你需要做以下修改：

您的服务应该只负责获取数据，并将其返回到您的组件
在你的组件，你不应该直接参考文件。如果确实需要引用的元素，你可能想去做这件事，像这样：

在HTML：

<canvas #historicChart></canvas>

在Component：

@ViewChild('historicChart') historicChart: ElementRef;

然后，在获取组件中的数据后：

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

来源

2017-09-01 14:49:15 John

通过遵循您的解决方案，问题是何时可以在服务的数据可用时调用组件的方法构建图表？我可以使用事件发射器或@输入/ @输出吗？ –

您可以将EventEmitter放入服务将数据推送到的其中一个服务中;你的组件可以订阅 – John

服务是否可以访问组件的模板

回答

相关问题