Angular 如何正确使用 element-resize-detector
Angular how to properly use element-resize-detector
我安装了 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);
}
}
现在我想将 canvas 设置为全屏:
@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 的行中。我也不确定(如果其他人认为有效)我设置大小的命令是否正确。
这是我找到的解决问题的方法:
@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(...);
}
});
}
}
虽然它并不完美(纵横比总是适合宽度,并不总是使用完整的可用高度)但它还是很稳固。
我安装了 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);
}
}
现在我想将 canvas 设置为全屏:
@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 的行中。我也不确定(如果其他人认为有效)我设置大小的命令是否正确。
这是我找到的解决问题的方法:
@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(...);
}
});
}
}
虽然它并不完美(纵横比总是适合宽度,并不总是使用完整的可用高度)但它还是很稳固。