你怎么称呼这个方法(角5 )？
你怎么称呼这个方法(角5 )？
提问于 2018-01-30 14:14:38
因此，我对角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中调用EventListener函数。我怎样才能做到这一点？通常，我会用this.dragDropMagic(e)调用一个方法，不幸的是，它似乎不起作用。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-01-30 14:58:51
与调用addEventListener不同，可以将dragDropMagic方法绑定到组件模板中drop区域的drop事件，如this stackblitz所示
<div (dragover)="$event.preventDefault()" (drop)="dragDropMagic($event)">Drop area</div>dragDropMagic(event: DragEvent) {
event.preventDefault();
console.log("Do something...");
}Stack Overflow用户
发布于 2018-01-30 14:39:08
您需要使用@HostListener来处理这个问题。
@HostListener('window:drop', ['$event'])
public dragDrop(event) {
event.preventDefault();
// Do your magic;
}要想从真正得到一个很好答案的人那里找到更多关于这个问题的信息，请看这个SO post，因为它提供了非常丰富的信息，可以用来开发您的代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48523526
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号