我对Angular很新。我试图使用Angular 2创建一个简单的Web应用程序,我允许用户从本地计算机中选择和映像。然后我想在<img>
标记中显示此图像。稍后对图像执行操作,如旋转,更改比例,更改宽度......等等。
这就是我在我的组件中所拥有的
@Component({
selector: 'image-container',
template: `
<input type="file" (change)="changeListner($event)" />
<img id="image"/>
`,
directives: [ImageActionsComponent]
})
export class ImageContainerComponent {
// make FileReader work with Angular2
changeListner(event){
var reader = new FileReader();
reader.onloaded = function (e) {
// get loaded data and render thumbnail.
var src = e.target.result;
document.getElementById("image").src = src;
};
// read the image file as a data URL.
reader.readAsDataURL(event.target.files[0]);
}
}
但它根本不起作用。如何使用Angular2读取图像并更新src属性?
我只是想学习Angular。 :)
有更好更简单的方法吗?
答案 0 :(得分:7)
由于您拥有onloaded
个活动名称,因此无法使用。没有这样的事件,它应该是onload
:
import {Component, ElementRef} from 'angular2/core'
@Component({
selector: 'image-container',
template: `
<input type="file" (change)="changeListner($event)" />
<img class="image" />
`,
directives: [ImageActionsComponent]
})
export class ImageContainerComponent {
constructor(private element: ElementRef) {}
changeListner(event) {
var reader = new FileReader();
var image = this.element.nativeElement.querySelector('.image');
reader.onload = function(e) {
var src = e.target.result;
image.src = src;
};
reader.readAsDataURL(event.target.files[0]);
}
}
使用ElementRef
在组件中定位图片也是最好的。
答案 1 :(得分:2)
对于那些使用angular:属性结果在EventTarget
类型中不存在的人你可以通过以下方式解决这个问题:
this.url = event.target['result']
答案 2 :(得分:0)
我的解决方案是:
reader.onload = (e) => {
image.src=reader.result;
}