Question

我有一个角度通用的事件监听器问题。

我有一个document-page-component，它包含一个在图像加载时调用的方法：

<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 Universal模式下调用。

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

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

Angular universal也不支持它......

你是否知道可以用于Angular Universal的onload监听器的替代方法。

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

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

Answer 1

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

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

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

1 个答案: