Angular Universal 的事件监听器替代方案答案

【问题标题】：Event listener alternative with Angular UniversalAngular Universal 的事件监听器替代方案
【发布时间】：2018-05-09 09:01:23
【问题描述】：

我遇到了 Angular Universal 的事件监听器问题。

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

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

这里是组件方法，动态计算图片的宽高，更新一个属性。

  calculateImageSize() {
    // Get naturalWidth and naturalHeight of the signature
    this.imgWidth = this.img.nativeElement.naturalWidth;
    this.imgHeight = this.img.nativeElement.naturalHeight;

    // Change pageReady value to display the signatures
    this.pageReady = true;
  }

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

代码在前端 Angular 应用程序中以这种方式工作，但在 Angular 通用模式下永远不会调用 (load)。

我尝试了另一种 onload 实现，直接在组件内部，这样：

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

Angular Universal 也不支持它...

您是否有任何想法可以替代适用于 Angular Universal 的 onload 侦听器。

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

虽然我更喜欢 onload 事件监听器的替代方案，所以如果有人有想法，请随时提示！或者构建一个图像和

【问题讨论】：

标签： javascript angular event-listener angular-universal

【解决方案1】：

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

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

【讨论】：

我在某个时候到达了那里！我最终从后端获得了一个比率，以便将我的元素定位在图像上。
你确实做到了。我虽然因为加载时间而无法获得图片的宽度和高度。