如何從angular 2 onDrop事件獲取文件？

Question

我想這樣的，但onDrop方法，當我把它不回的圖像文件...

onDragStart(event, data: any) { 
    event.dataTransfer.setData('data', data); 
} 
onDrop(event, data: any) { 
    let dataTransfer = event.dataTransfer.getData('data'); 
    event.preventDefault(); 
} 
allowDrop(event) { 
    event.preventDefault(); 
} 


<div (drop)="onDrop($event, dropData)" (dragover)="allowDrop($event)"></div> 
<div (dragstart)="onDragStart($event, dragData)"></div> 

這個任何解決方案？

Answer 1

你可以嘗試使用Hostlistener裝飾的拖動事件，你可以看到它實現例如here in ng2-file-upload

Answer 2

事件onDrop事件觸發，只有當onDragOver有preventDefault()和stopPropagation()方法在事件上運行。

HTML

<div 
    (drop)="onDrop($event)" 
    (dragover)="onDragOver($event)" 
> 
    Drop target 
</div> 

DropComponent.ts

export class DropComponent { 
    onDrop(event) { 
     event.preventDefault(); 
    } 
    onDragOver(event) { 
     event.stopPropagation(); 
     event.preventDefault(); 
    } 
} 

UPDATE

這是必需的，因爲默認情況下，瀏覽器可以防止任何情況的發生，而滴落到HTML ELEM ENT。查看更多內容 MDN - Defining a valid drop zone