Javascript @ViewChild{static:true}关于Angular 9中动态元素的问题

我已经阅读了StackOverFlow上与@ViewChild相关的所有答案，但仍然找不到解决问题的方法。 故事是这样的

我有一个画布元素

我通过以下方式来达到目的

@ViewChild（'imageCanvas'，{read:ElementRef，static:true}）imageCanvas:ElementRef

我用ngOnInit（）方法渲染图像

现在是头痛的部分
我在container div上添加了（panstart）、（panend）etc事件，如果提到
static:true
，则该事件不起作用
若我把
static:false
放进去，那个么那个些事件正在工作，但图像并没有呈现在画布上，我得到了
TypeError:无法读取未定义的属性“nativeElement”

我知道原因，这是因为在添加了
static:true
之后，我的画布变成了静态内容，所以像*ngIf、*ngFor之类的指令或任何改变它的事件都不起作用。也尝试了setTimeout（），但不起作用。
我在pdf上绘制图像，其中图像是独立的组件

编辑：
我将render（）放在ngAfterViewInit（）中，图像在画布上以静态false呈现，但静态事件（panstart、panend）不起作用

如有任何建议或帮助，将不胜感激。
提前谢谢。忽略语法错误^-^。
您是否尝试过使用ngAfterViewInit？是的，我可以使用该选项查看带有静态false的图像，但仍然无法获取panstart事件您是否尝试过使用ngAfterViewInit？是的，我可以使用该选项查看带有静态false的图像，但仍然无法获取panstart事件
 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, 0);
    
  }