angular - 如何在我的模板组件中将 previewTemplate 绑定到 dropzone-wrapper

Question

我有一个带有 div 的表单和用户当前照片所在的图像。我在图像顶部创建了一个图标，单击该图标会激活 dropzone 指令并打开框以选择新照片。

问题在于，正如文档所解释的那样，在选择照片时，拖放区本身会生成一个动态 div。我希望在图像和我已经创建的模板中重新加载图像。我正在尝试使用 previewTemplate 但这不是我想要的，我不想创建新模板，并且我希望将图像与当前图像一起重新加载到我的 div 中。这是可能的？如何在 previewTemplate 中绑定 id 以使用已经存在的图像引用我的 div 以仅更改图像的 src？

我正在使用角度版本 8。

例子：

<div fxLayout="column" >
   <img [src]='assets/images/{{photo}}.jpg' />
   <mat-icon class="material-icons" [dropzone]="config" 
      (init)="onUploadInit($event)" color="primary">photo_camera
   </mat-icon>
</div>

零件：

public config: DropzoneConfigInterface = {
 clickable: true,
 maxFiles: 1,
 autoReset: null,
 errorReset: null,
 cancelReset: null,
 previewTemplate: ?
};

我在 stackblitz 中做了一个例子。当您从计算机中选择照片时，dropzone 会生成一个带有所选图像和效果的动态 div。我想要的是将狗的图像更改为 img 内的新图像，在 dropzone 的效果旁边： https ://stackblitz.com/edit/angular-uvvw3w

标签： angularangular-clidropzone