Как привязать PreviewTemplate к dropzone-обертке в моем компоненте шаблона - PullRequest
Новая
       18

Как привязать PreviewTemplate к dropzone-обертке в моем компоненте шаблона

1 голос
/ 17 апреля 2019

У меня есть форма с div и изображение, где текущая фотография пользователя. Я создал значок в верхней части изображения, который при нажатии активирует директиву dropzone и открывает поле для выбора новой фотографии.

Проблема заключается в том, что при выборе фотографии динамический div создается самой зоной перетаскивания, как объясняется в документации. Я хочу, чтобы изображение было перезагружено в образе и в шаблоне, который я уже создал. Я пытаюсь использовать previewTemplate, но это не то, что я хочу, я не хочу создавать новый шаблон, и я хочу, чтобы изображение перезагружалось внутри моего div с текущим изображением. Возможно? Как я могу связать идентификатор в previewTemplate, чтобы ссылаться на мой 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, рядом с эффектами дропзоны: https://stackblitz.com/edit/angular-uvvw3w

...