Javascript 事件监听器与角度通用的替代方案

我有一个angular universal的事件侦听器问题

我有一个文档页面组件，其中包含一个在图像加载时调用的方法：

<img src="{{pageImage}}" class="{{module.class}}" alt="{{module.alt}}" (load)="calculateImageSize()" #img>

我必须这样做，因为我事先不知道图片的大小，我必须使用这个值在页面上用这些值定位元素

该代码在前端Angular应用程序中是这样工作的，但在Angular通用模式下永远不会调用load

我直接在组件内部尝试了另一种onload实现，如下所示：

  ngAfterViewChecked() {
    this.renderer.listen(this.img.nativeElement, 'load', () => {
      this.calculateImageSize();
    })
  }

Angular universal也不支持它

您是否有任何替代的想法，以加载侦听器，将工作的角度普遍

我想到的解决问题的两种方法是： -要在服务中调用映像，请将其转换为base64，并将其作为源传递给映像。 -创建图像元素并将其注入页面

不过，我更喜欢onload事件监听器的替代方案，所以如果有人有想法，请随时提供提示！

---

或者在通用模块的当前状态下构建图像和AFAIK，获取元素的宽度和高度是不可能的。这是因为没有发生任何实际的UI呈现，因此没有填充值naturalWidth、naturalHeight

---

我建议您为服务器端渲染的图像提供至少估计的虚拟宽度/高度。您可以使用isPlatformBrowser对浏览器和服务器的不同逻辑进行侧移。

我在某个时候就做到了！为了在图像上定位我的元素，我从后端得到了一个比率。你确实做到了。我认为我无法获得图片的宽度和高度，因为加载时间太长。

  ngAfterViewChecked() {
    this.renderer.listen(this.img.nativeElement, 'load', () => {
      this.calculateImageSize();
    })
  }