Angular使用element-resize-detector监听canvas尺寸报错及全屏设置咨询

1. 参数报错修复 #

错误原因：你封装的ResizeService中addResizeEventListener方法要求第一个入参是原生HTMLElement对象，但你传入的是Angular封装后的ElementRef实例this.canvas，不符合element-resize-detector的参数要求。
修改方式如下：

• 调用监听方法时传入this.canvas.nativeElement（也就是原生DOM节点）
• 调整回调参数类型，element-resize-detector的回调直接返回原生DOM节点，无需再套ElementRef包装

修改后的组件代码：

// 建议先明确ViewChild类型，避免后续any带来的类型问题
@ViewChild('canvas', {static: true}) canvas: ElementRef<HTMLCanvasElement>;
private ctx: CanvasRenderingContext2D | null = null;

ngAfterViewInit() {
   if (!this.canvas?.nativeElement) return;
   this.ctx = this.canvas.nativeElement.getContext('2d');
   
   // 第一个参数传入原生DOM节点，回调参数直接使用HTMLCanvasElement类型
   this.resizeService.addResizeEventListener(this.canvas.nativeElement, (elem: HTMLCanvasElement) => {
      elem.width = window.innerWidth;
      elem.height = window.innerHeight;
      this.drawStuff(); // 注意绑定当前组件的this指向
   });
}

也可以同步优化ResizeService的类型声明，避免后续传参错误：

import { Injectable } from '@angular/core'; 
import * as elementResizeDetectorMaker from 'element-resize-detector';

@Injectable({
   providedIn: 'root'
})
export class ResizeService {
   private resizeDetector: elementResizeDetectorMaker.Erd;

  constructor() {
      this.resizeDetector = elementResizeDetectorMaker({ strategy: 'scroll' });
  }

  addResizeEventListener(element: HTMLElement, handler: (elem: HTMLElement) => void) {
     this.resizeDetector.listenTo(element, handler);
  }

  // 原uninstall方法会移除该元素所有监听，如果只需要移除单个监听可以替换为removeListener，按需调整即可
  removeResizeEventListener(element: HTMLElement) {
     this.resizeDetector.uninstall(element);
  }
}

2. Canvas全屏逻辑优化 #

你当前的尺寸设置核心逻辑是正确的，补充几个注意点避免后续问题：

• 增加CSS适配消除页面留白和滚动条：

/* 全局样式或组件样式中添加 */
:root, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
canvas {
  display: block; /* 消除inline元素默认底部空白 */
}

• 增加设备像素比适配，避免高清屏绘制模糊：

this.resizeService.addResizeEventListener(this.canvas.nativeElement, (elem: HTMLCanvasElement) => {
  const dpr = window.devicePixelRatio || 1;
  elem.width = window.innerWidth * dpr;
  elem.height = window.innerHeight * dpr;
  // 上下文缩放保证绘制尺寸正常
  this.ctx?.scale(dpr, dpr);
  this.drawStuff();
});

• 组件销毁时主动移除监听，避免内存泄漏：

ngOnDestroy() {
  if (this.canvas?.nativeElement) {
    this.resizeService.removeResizeEventListener(this.canvas.nativeElement);
  }
}

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