Angular 2 拖放

Question

我的 Angular 2 项目的 index.html 中有这些函数：

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", "teststring");
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    console.log(data);
}
</script>

当我将这些函数放入组件中时，会出现以下错误：

Uncaught ReferenceError: drag is not defined at HTMLImageElement.ondragstart
Uncaught ReferenceError: allowDrop is not defined at HTMLDivElement.ondragover

使用这些函数的元素在组件 html 中：

<div> ondrop="drop(event)" ondragover="allowDrop(event)">
    <img> src="smiley.png" draggable="true" ondragstart="drag(event)">
</div>

<div ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

Answer 1

无需将代码移动到 index.html，只需执行以下操作：

改变

ondrop, ondragover, ondragstart, event

到

(drop), (dragover), (dragstart), $event

分别在您的模板（html）中。