Ionic 3：将Canvas代码移入Provider时遇错误求助

问题根源 #

你遇到的报错本质是Provider（服务类）没有组件的视图上下文——@ViewChild是Angular专为组件/页面设计的装饰器，用来从模板中抓取DOM元素或子组件实例，它在Provider里完全起不了作用，自然拿不到canvasEl，执行nativeElement时就会抛出类似Cannot read property 'nativeElement' of undefined的错误。

解决方案：把Canvas元素从页面传递给Provider #

既然Provider不能直接获取视图元素，我们换个思路：在页面组件里拿到Canvas元素，再传递给Provider的方法，让Provider专注于复用Canvas的绘制逻辑。

步骤1：创建处理Canvas逻辑的Provider

先写一个Provider，里面只保留Canvas的绘制方法，把初始化和元素依赖交给页面组件处理：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CanvasService {
  private canvasCtx: CanvasRenderingContext2D;

  // 初始化Canvas，接收页面传过来的Canvas元素
  initCanvas(canvas: HTMLCanvasElement) {
    this.canvasCtx = canvas.getContext('2d');
    // 这里可以统一设置Canvas基础配置，比如尺寸、背景色
    canvas.width = 350;
    canvas.height = 350;
  }

  // 复用的绘制方法：示例画圆形
  drawCircle(x: number, y: number, radius: number, color = '#ff4081') {
    if (!this.canvasCtx) {
      throw new Error('请先调用initCanvas初始化Canvas！');
    }
    this.canvasCtx.beginPath();
    this.canvasCtx.arc(x, y, radius, 0, Math.PI * 2);
    this.canvasCtx.fillStyle = color;
    this.canvasCtx.fill();
  }

  // 其他复用的Canvas方法，比如画线、矩形等
  drawLine(startX: number, startY: number, endX: number, endY: number) {
    if (!this.canvasCtx) {
      throw new Error('请先调用initCanvas初始化Canvas！');
    }
    this.canvasCtx.beginPath();
    this.canvasCtx.moveTo(startX, startY);
    this.canvasCtx.lineTo(endX, endY);
    this.canvasCtx.strokeStyle = '#333';
    this.canvasCtx.lineWidth = 2;
    this.canvasCtx.stroke();
  }
}

步骤2：在页面组件中获取Canvas并传递给Provider

在需要使用Canvas的页面里，用@ViewChild正常抓取元素，然后在ngAfterViewInit（视图渲染完成后）调用Provider的初始化方法：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { CanvasService } from '../services/canvas.service';

@Component({
  selector: 'app-draw-page',
  templateUrl: './draw-page.page.html'
})
export class DrawPagePage implements AfterViewInit {
  @ViewChild('canvas') canvasEl: ElementRef;

  constructor(private canvasService: CanvasService) { }

  ngAfterViewInit() {
    // 视图初始化完成后，把Canvas元素传给Provider初始化
    this.canvasService.initCanvas(this.canvasEl.nativeElement);
    
    // 调用Provider里的复用方法
    this.canvasService.drawCircle(175, 175, 50);
    this.canvasService.drawLine(50, 250, 300, 250);
  }
}

对应的页面模板（draw-page.page.html）：

<ion-content>
  <canvas #canvas></canvas>
</ion-content>

备选方案：每次调用方法时传入Canvas上下文

如果不想在Provider里保存Canvas实例，也可以每次调用绘制方法时直接传入Canvas上下文，这种方式更轻量化：

// CanvasService中的方法修改为：
drawRectangle(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number) {
  ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.strokeStyle = '#2196f3';
  ctx.lineWidth = 3;
  ctx.stroke();
}

页面里调用：

ngAfterViewInit() {
  const ctx = this.canvasEl.nativeElement.getContext('2d');
  this.canvasService.drawRectangle(ctx, 80, 80, 200, 120);
}

注意事项 #

• 必须在ngAfterViewInit生命周期钩子中操作Canvas元素，因为Angular在这个阶段才完成视图渲染，@ViewChild才能拿到有效的DOM元素。
• 每个页面的Canvas元素都是独立的，所以每个使用Canvas的页面都要执行一次初始化逻辑。

内容的提问来源于stack exchange，提问作者Tim Mallett