Question

我有一个简单的要求，即显示给定图像URI的原始维度。像这样非常简单。

<div><img src="{{imageUri}}"/></div>
<p>Image size: {{width}}x{{height}}</p>

我正在使用异步方法通过listening for the "load" event获取图片尺寸。但是在事件处理程序中如何更新UI？

我尝试在我的组件中设置this.width和this.height，实现OnInit。下面的代码段说明了我正在尝试做的事情，我还创建了一个more complete plunk来演示问题。

constructor() {
  this.imageUri = 'https://angular.io/resources/images/logos/angular2/angular.svg';
  this.width = 0;
  this.height = 0;
}

handleImageLoad(event): void {
  this.width = event.target.width;
  this.height = event.target.height;
}

ngOnInit(): void {
  this.version = 2;  // Just to prove Angular is working

  // Set the image height and width
  var image = new Image();
  image.addEventListener('load', this.handleImageLoad);
  image.src = this.imageUri;
}

我觉得我有一个非常简单的解决方案，或者我无意中违反了Angular 2的一些原则。

Answer 1

您可以使用箭头功能来保留上下文：

image.addEventListener('load', (e) => this.handleImageLoad(e));

另见Behaviour after scroll event

如何在Angular 2模板中显示原始图像尺寸？

1 个答案: