Question

所以，我对Angular 5很新，在我的应用程序中我有一个看起来像这样的组件：

//imports

@Component({
  selector: 'dragdropmagic',
  templateUrl: './dragdropmagic.component.html',
  styleUrls: ['./dragdropmagic.component.css']
})
export class DragDropMagicComponent {

  constructor(/*inject services etc*/) {}

  ngOnInit() {
    //init stuff..
  }

  document.getElementById("dragdrop").addEventListener("drop", function (e) {
    e.preventDefault();

    dragDropMagic(e); /*<--- Throws error "Cannot find name 'dragDropMagic'" */
    this.dragDropMagic(e); /*<--- Throws error "Not valid Property for HTML Element" */
  })

  dragDropMagic(e){
    console.log("Do something...");
  }
}

我要做的是调用EventListener中的dragDropMagic函数。我怎样才能实现这一目标？通常我会用this.dragDropMagic(e)调用一个方法，不幸的是它似乎无法正常工作。

Answer 1

你需要使用@HostListener来处理这个问题。

@HostListener('window:drop', ['$event'])
public dragDrop(event) {
  event.preventDefault();

  // Do your magic;
}

要从真正得到满意答案的人那里了解更多相关内容，请参阅此SO post，因为它提供了非常丰富的信息，您可以从中开发代码。

Answer 2

您可以将addEventListener方法绑定到组件模板中放置区域的dragDropMagic事件，而不是调用drop，如this stackblitz所示：

<div (dragover)="$event.preventDefault()" (drop)="dragDropMagic($event)">Drop area</div>

dragDropMagic(event: DragEvent) {
  event.preventDefault();
  console.log("Do something...");
}

你怎么称呼这种方法（Angular 5）？

2 个答案: