时间戳

首页 > 解决方案 > Angular如何正确使用元素调整大小检测器

angular - Angular如何正确使用元素调整大小检测器

问题描述

我安装了 element-resize-detector 并找到了以下服务来使用它：

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

@Injectable({
   providedIn: 'root'
})

export class ResizeService {
   private resizeDetector: any;

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

  addResizeEventListener(element: HTMLElement, handler: Function) {
     this.resizeDetector.listenTo(element, handler);
  }

  removeResizeEventListener(element: HTMLElement) {
     this.resizeDetector.uninstall(element);
  }
}

现在我想将我的画布设置为全屏：

@ViewChild('canvas', {static: true}) canvas: any;
private ctx: any;

ngAfterViewInit() {
   this.ctx = this.canvas.nativeElement.getContext('2d');
   
   this.resizeService.addResizeEventListener(this.canvas, (elem: 
   ElementRef<HTMLCanvasElement>) => {
      elem.nativeElement.width = innerWidth;
      elem.nativeElement.height = innerHeight;
      drawStuff(...);
   });
   
}

我收到以下错误：“无效的参数。必须是 DOM 元素或 DOM 元素的集合。” 在我添加 resize-event-listner 的行中。我也不确定（如果其他人认为有效）我设置大小的命令是否正确。

标签： angulartypescriptresize

解决方案

这是我为该问题找到的解决方案：

@ViewChild('canvas', {static: false}) canvas?: ElementRef<HTMLCanvasElement>;
private ctx: any;

ngAfterViewInit() {    
  if(this.canvas != null) {
     this.ctx = this.canvas.nativeElement.getContext('2d');

  this.resizeService.addResizeEventListener(this.canvas.nativeElement, (elem: any) => {
    
    if(this.canvas != null) {
      this.canvas.nativeElement.width = innerWidth;
      this.canvas.nativeElement.height = innerHeight;
    }

    for(let i = 0; i < chart.getData().length; i++) {
      if(this.canvas != null)
        drawStuff(...);
      }
    });
  }
}

尽管它并不完美（纵横比总是与宽度相匹配，并不总是使用完整的可用高度），但它并不完美。

推荐阅读