javascript - 来自组件的 Angular 事件监听器

Question

我希望能够从 <input type="file" id="fileLoader"> 中上传的图像更新图像 SRC 属性，我已经使用 vanilla JS 实现了这个。我如何在 Angular 组件中做同样的事情

我的代码如下

使用 JavaScript

window.addEventListener('load', function() {
  document.querySelector('#fileLoader').addEventListener('change', function() {
    if (this.files && this.files[0]) {
      var img = document.querySelector('img');
      img.src = URL.createObjectURL(this.files[0]);
    }
  });
});


<img src="https://via.placeholder.com/150" alt="">

我如何在 Angular 分量中复制它？

Answer 1

我认为你可以简化很多

1) 使用两种方式的数据绑定(bind)和 ngModel 将您的 url 值绑定(bind)到您的输入:

<!-- your input element -->
<input type="file" (change)="uploadImage($event)"/>

3) 在你的组件中

// extract the url of the data and let it appear
public uploadImage(event: any) {
  this.myModel = URL.createObjectURL(event.target.files[0])
}

2)你的形象

<img [src]="myModel">

这应该有效!