时间戳

首页 > 解决方案 > 在 Angular 中渲染完成后获取图像的尺寸

javascript - 在 Angular 中渲染完成后获取图像的尺寸

问题描述

我正在尝试获取组件中图像的渲染大小。使用 (load) 事件，我得到了当时显示的图像大小 (pic1) 以及页面完全呈现后的“最终”大小。我想我可以使用 ngAfterViewChecked 但这意味着当唯一有意义的实例是窗口打开或调整大小时，我会不断计算该大小

(load) 事件触发

标签： javascriptangularimageevents

解决方案

  • 您可以使用的另一种方法是，使用 订阅Window: resize事件更改HostListener以计算图像尺寸，如以下代码片段所示。
import { HostListener } from '@angular/core';

@HostListener('window:resize', ['$event'])
  // Invoke function to compute the image dimensions here
}

注意：您还可以调用该函数来计算生命周期挂钩内所述图像的尺寸，AfterViewInit而不是在load事件上。

  • Window: resize另一种方法是通过使用 监听事件的变化来计算图像尺寸fromEvent，如下面的代码片段所示。
import { fromEvent } from 'rxjs';

changeSubscription$: Subscription

ngOnInit() {
  this.windowResizeEventChanges$ = fromEvent(window, 'resize').subscribe(event => {
    // Invoke function to compute the image dimensions here
  });
}

ngOnDestroy() {
  this.windowResizeEventChangesn$.unsubscribe() // Unsubscribe to stop listening the changes in Window: resize
}

阅读更多关于fromEvent 这里。

推荐阅读