为何通过ElementRef获取Canvas上下文失败？

算力阿峰

2026-5-14

问题根源分析

你遇到的问题核心在于Angular的生命周期钩子执行时机和ViewChild的static配置：

当你设置{static: false}时，ViewChild会在视图初始化完成后才会被赋值到组件属性中。而ngOnInit钩子是在组件初始化完成，但视图还未完全渲染的时候执行的，这时候this.myca还是undefined，调用nativeElement自然会报错。
用document.getElementById能成功，是因为在ngOnInit阶段，DOM元素已经被渲染到页面中了，所以可以直接通过ID获取到。

解决方案

方案1：切换到`ngAfterViewInit`钩子（推荐）

把你的Canvas初始化逻辑移到ngAfterViewInit中，这是Angular官方推荐的、安全获取视图元素的时机：

@ViewChild('myca', {static: false}) myca: ElementRef<HTMLCanvasElement>;

ngAfterViewInit() {
  const ctx = this.myca.nativeElement.getContext('2d');
  const img1 = new Image();
  img1.src = "http://any_img_you_want.jpg";
  img1.onload = function () {
      ctx.drawImage(img1, 0, 0);
  }
}

方案2：修改`static`配置为`true`（仅适用于无条件渲染的元素）

如果你的Canvas元素没有被*ngIf等条件指令控制（也就是初始渲染就存在），可以把ViewChild的static设为true，这样this.myca会在ngOnInit阶段就被赋值：

@ViewChild('myca', {static: true}) myca: ElementRef<HTMLCanvasElement>;

ngOnInit() {
  const ctx = this.myca.nativeElement.getContext('2d');
  const img1 = new Image();
  img1.src = "http://any_img_you_want.jpg";
  img1.onload = function () {
      ctx.drawImage(img1, 0, 0);
  }
}