要在Angular 8中实现在不重新构建项目的情况下显示新上传的图像,您可以使用Angular的ChangeDetectorRef和ViewChild。
首先,确保您的上传图像的文件输入元素具有一个引用变量。例如,在模板中,您可以将文件输入元素定义为:
然后,在组件类中,使用ViewChild获取对文件输入元素的引用,并使用ChangeDetectorRef来强制更新视图。在组件类中添加以下代码:
import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-your-component',
template: ''
})
export class YourComponent {
@ViewChild('fileInput', {static: false}) fileInput;
constructor(private cdr: ChangeDetectorRef) {}
onFileSelected(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e: any) => {
this.imageUrl = e.target.result;
this.cdr.detectChanges(); // 强制更新视图
};
reader.readAsDataURL(file);
}
}
在onFileSelected方法中,我们使用FileReader来读取上传的图像文件,并将结果存储在组件类的imageUrl属性中。然后,我们使用ChangeDetectorRef的detectChanges方法来强制更新视图,以显示新的图像。
请注意,ChangeDetectorRef的detectChanges方法只能在异步操作之后调用,以确保视图已更新。在这种情况下,我们在FileReader的onload事件处理程序中调用它。
这样,您就可以在不重新构建项目的情况下显示新上传的图像。