无法读取Angular组件中画布的未定义属性

Question

当我的Angular 13 Ionic 6应用程序在两台安卓设备(三星Galaxy A32和小米Rednote 8(上运行时，我在运行时遇到了这个错误。

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'getContext')

我尝试实例化ngOnInit(使用{static: true }(中的所有内容，而不是在ngAfterViewInit中，但没有帮助。

此画布在白板组件中实现，该组件嵌入聊天页面。

我错过了什么？

白板模板：

<ion-grid class="container no-scroll row h-100 container">
<ion-row>
<ion-col>
<canvas #canvas class="no-scroll row" 
(mousedown)="startDrawing($event)" 
(touchstart)="startDrawing($event)" 
(touchmove)="moved($event)" 
(mousemove)="moved($event)" 
(mouseup)="endDrawing()" 
(touchend)="endDrawing()">
</canvas>
</ion-col>
</ion-row>
...

白板控制器：

import { Component, ViewChild, AfterViewInit, ElementRef, OnInit } from '@angular/core';
import { NavController, IonContent  } from '@ionic/angular';
import { Platform, ToastController } from '@ionic/angular';
import { AwsFileUploadService } from '../../services/aws-file-upload.service'
@Component({
selector: 'app-whiteboard',
templateUrl: './whiteboard.component.html',
styleUrls: ['./whiteboard.component.scss'],
})
export class WhiteboardComponent implements AfterViewInit {
@ViewChild('canvas', { static: false }) 
imgToast: HTMLElement; //For image hover capture
//canvas: ElementRef<HTMLCanvasElement>;
private canvas: ElementRef<HTMLCanvasElement> = {} as ElementRef<HTMLCanvasElement>;
private ctx: CanvasRenderingContext2D;
canvasElement: any;
ngAfterViewInit() {

this.ctx = this.canvas.nativeElement.getContext('2d'); // <<----- ERROR HERE
this.ctx.canvas.width = this.plt.width() ;
this.ctx.canvas.height = this.plt.height();
//Need to upload the initial problem image here
//Handle image hover if needed - set id of html image element to imgSection
this.imgToast = document.getElementById('imgSection');
this.imgToast.addEventListener('mousemove', ev => {
this.showToastOnImage();
});
}
...

聊天页面模板：

<ion-header>
<ion-toolbar>
<ion-title>chat</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid class="container h-100">
<ion-row class="ion-justify-content-center row h-100 ion-no-padding">
<ion-col size="12" id="content-text" class="ion-no-padding" style="height: 60%">
<app-whiteboard style="height: 100%; width: 100%"></app-whiteboard>            
</ion-col>
...

聊天页面模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { FIREBASE_OPTIONS  } from '@angular/fire/compat';
import { IonicModule } from '@ionic/angular';
import { environment } from '../../environments/environment';
import { ChatPage } from './chat.page';
import { WhiteboardComponent } from './whiteboard/whiteboard.component';
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule
],
declarations: [ChatPage, WhiteboardComponent],
providers: [{ provide: FIREBASE_OPTIONS, useValue: environment.firebaseConfig }],
exports: [ChatPage]
})
export class ChatPageModule {}

Answer 1

正如@ChrisHamilton所说，您必须在canvas之前添加@ViewChild。

export class WhiteboardComponent implements AfterViewInit {
imgToast: HTMLElement; //For image hover capture
@ViewChild('canvas', { static: false }) canvas: ElementRef<HTMLCanvasElement>;