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 应用程序一起工作，但 (load) 永远不会在 Angular 通用模式下调用。

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

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

Angular通用也不支持...

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

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

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

Answer 1

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

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

Angular Universal 的事件侦听器替代方案

Event listener alternative with Angular Universal

javascript

event-listener

angular-universal

angular