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

Question

我遇到了 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 通用也不支持它......

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

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

不过，我更喜欢 onload 事件监听器的替代方案，所以如果有人有想法，请随时提出! 或者构建一个图像并

Answer 1

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

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