Question

为简单起见，我删除了不必要的代码。

已尝试使用 ngAfterViewInit 和 ngOnChanges ，但 this.chart 尚未定义。

.html

<div class="chartContainer">
  <canvas id="chart" class="canvas"></canvas>
</div>

.ts

 ngOnInit() {
   this.drawChart();
}
drawChart() {
    this.chart = document.getElementById("chart");
    console.log(this.chart);
}

Answer 1

我会使用ViewChild绑定：

html

<div class="chartContainer">
  <canvas #chart id="chart" class="canvas"></canvas>
</div>

ts

@ViewChild('chart') chart: ElementRef<HTMLCanvasElement>; // Might need to add { static: true } after 'chart;



ngAfterViewInit() {
    console.log(this.chart.nativeElement)
}

Answer 2

您应该将服务注入到您的呼叫文档组件中。

import { DOCUMENT } from '@angular/common';

export class YourComponent {
  constructor(@Inject(DOCUMENT) private document: HTMLDocument) {
...

在Angular中使用getElementById返回未定义

2 个答案: