如何解决@ViewChild {static:true}关于Angular 9中的动态元素的问题
我已经阅读了StackOverFlow上与@ViewChild相关的所有答案,但仍然找不到我的问题的解决方案。 这是故事。
我有一个画布元素
<canvas class="w-full h-full" #imageCanvas id="imageCanvas"></canvas>
我正在关注
@ViewChild('imageCanvas',{read: ElementRef,static: true}) imageCanvas:ElementRef;
我正在用ngOnInit()方法渲染图像
ngOnInit(): void {
this.render();
}
async render() {
console.log("render")
// use canvas to prevent img tag's auto resize
this.imageCanvas.nativeElement.width = this.width;
this.imageCanvas.nativeElement.height = this.height;
console.log("inside render",this.payload)
this.imageCanvas.nativeElement.getContext("2d").drawImage(this.payload,0);
}
现在来头痛的部分
我在容器div上添加了(panstart),(panend)等事件,如果提到了static:true
,则该事件不起作用
如果我放static:false
,则这些事件有效,但图像无法在画布上渲染,我得到
TypeError: Cannot read property 'nativeElement' of undefined
我知道原因,这是因为在添加static:true
之后,我的画布变成了静态内容,因此诸如* ngIf,* ngFor或任何对其进行更改的事件之类的指令将不起作用。也尝试过setTimeout(),但无效。
我正在pdf上绘制图像,其中图像是单独的组件。
编辑: 我将render()放在ngAfterViewInit()中,图像以静态false渲染到画布上,但是事件(panstart,panend)仍然无法正常工作。
任何建议或帮助将不胜感激。 提前致谢。忽略语法错误^-^。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。