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

因此，我对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...");
  }
}

//导入
@组成部分({
选择器：“dragdropmagic”，
templateUrl:'./dragdropmagic.component.html'，
样式URL:['./dragdropmagic.component.css']
})
导出类DragDropMagicComponent{
构造函数（/*注入服务等*/）{}
恩戈尼尼特（）{
//初始化东西。。
}
document.getElementById（“dragdrop”）.addEventListener（“drop”，函数（e）{
e、 预防默认值（）；
dragDropMagic（e）；/*您需要使用@HostListener来处理此问题

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

  // Do your magic;
}

要想从一个真正得到了很好答案的人那里了解更多信息，请看这篇文章，因为它提供了非常丰富的信息，您可以从中开发代码。
而不是调用
addEventListener
，您可以将
dragDropMagic
方法绑定到组件模板中拖放区域的
drop
事件，如图所示：

您的代码必须位于某个方法中。请停止使用function（）。使用箭头函数。该函数可能与无效的javascript代码重复。请格式化您的代码。请尝试此操作
<div (dragover)="$event.preventDefault()" (drop)="dragDropMagic($event)">Drop area</div>

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