组件第二次初始化后elementId为null

Question

我有一个组件，我将在其中绘制 canvas 图表。当我第一次初始化组件时，一切正常，但是如果我再次离开这个组件并 return 给它，那么 document.getElementById('myChart');为空且不绘制我的图表

    ngAfterViewInit() {
    Chart.register(...registerables);
    this.Chart(); 
}


private Chart() {
    const ctx: any = document.getElementById('myChart');
const myChart = new Chart(ctx.getContext('2d'), { // some shit })
}

我尝试了不同的做法

 const canvas = <HTMLCanvasElement>document.getElementById('myChart');
    const ctx = canvas.getContext('2d');

但是一直没搞明白怎么解决这个错误，最终来到了第一个方案

Argument of type 'CanvasRenderingContext2D | null' is not assignable to parameter of type 'ChartItem'.   Type 'null' is not assignable to type 'ChartItem'.

Answer 1

我从不同的角度解决了这个问题。首先，我使用了 ViewChild 并对其应用了 ElementRef

  @ViewChild('myChart') chartRef: ElementRef;
  private myChart: Chart;

并确保使用 ngAfterViewInit 中的所有内容，因为它在构建 DOM 树后开始工作

  ngAfterViewInit(): void {
    this.Chart();
  }

 this.myChart = new Chart(this.chartRef.nativeElement, {some shit})

组件第二次初始化后elementId为null

The elementId is null after the second time the component has been initialized

javascript

charts

angular