Javascript 来自组件的角度事件侦听器

我希望能够从

中上传的图像中更新图像SRC属性，我已经使用vanilla JS实现了这一点。如何在角度分量中执行相同的操作

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

我的密码在下面

使用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="">

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]）；
}
});
});

---

我如何在角度分量中复制它？

我认为你可以简化很多

1） 使用双向数据绑定和ngModel将url值绑定到输入：

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

2） 你的形象

<img [src]="myModel">

---

这应该管用

在我看来，这可以简化很多

1） 使用双向数据绑定和ngModel将url值绑定到输入：

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

2） 你的形象

<img [src]="myModel">

---

这应该管用

Mikegross的回答是正确的，但不完整。Angular的消毒剂机制会抱怨这个url。你需要绕过它。 像这样：

import { Component } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  myModel: string | any = "";
  constructor(private sanitizer: DomSanitizer) {}
  public uploadImage(event: any) {
    const url = URL.createObjectURL(event.target.files[0]);
    this.myModel = this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

---

工作样本

Mikegross回答正确但不完整。Angular的消毒剂机制会抱怨这个url。你需要绕过它。 像这样：

import { Component } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  myModel: string | any = "";
  constructor(private sanitizer: DomSanitizer) {}
  public uploadImage(event: any) {
    const url = URL.createObjectURL(event.target.files[0]);
    this.myModel = this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

---

工作样本

“如何在角度分量中复制此项？”不清楚您的问题是什么。如何将事件侦听器添加到组件中的元素？如果您想在何处执行我的代码在angular component中执行的相同操作？您也没有说明angular的版本。angular cli:8.3.19“如何在angular component中复制此内容？”不清楚您的问题是什么。如何将事件侦听器添加到组件中的元素？如果您想在何处执行与我的代码在angular组件中所做的相同的操作？您也不说明angular的版本。angular cli:8.3.19不确定如何使用文件输入。。。。它不是用户拥有的文本框。如果这是一个文件输入，只需将（更改）事件侦听器用于设置url的函数……就像这样，您的意思是

和

上传（输入）{if（input.files&&input.files[0]）{const avatarImg:HTMLImageElement=document.querySelector（'img'）；avatarImg.src=url.createObjectURL（input.files[0]）；}}}

不，您可以使用事件直接访问您的文件，直到什么都没有发生。不知道如何使用文件输入…它不是用户拥有的文本框。如果是文件输入，只需使用（更改）事件侦听器设置url的函数…像这样您的意思是

和

上载（输入）{如果（input.files&&input.files[0]）{const avatarImg:HTMLImageElement=document.querySelector（'img'）；avatarImg.src=URL.createObjectURL（input.files[0]）；}

No，您可以使用该事件直接访问文件，直到什么都没有发生