Блог

Я прочитал все ответы, связанные с @ViewChild в StackOverflow, но все равно не смог найти решение своей проблемы. вот история..

У меня есть один элемент canvas

<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, 0);
    
  }
  

Теперь пришла часть головной
боли, которую я добавил (panstart), (panend) и т. Д. Событие для контейнера div, Которое не работает, если static:true указано
, если я помещаю static:false , то эти события работают, но изображение не отображается на холсте, и я получаю
TypeError: Cannot read property 'nativeElement' of undefined

Я знаю причину, потому что после добавления static:true мой холст стал статическим содержимым, поэтому такие директивы, как *ngIf , * ngFor или любое событие, которое его изменяет, не будут работать. Также пробовал setTimeout() , не сработало. Я рисую изображение в формате pdf, где изображение является отдельным компонентом.

редактировать: я поместил render() в ngAfterViewInit(), изображение было отображено на холсте со статическим false, но все равно события (panstart, panend) не работают.

Любое предложение или помощь будут оценены. Заранее спасибо. Игнорируйте грамматические ошибки ^-^.