Question

我在span中有点击事件。当点击跨度图标时，它会下载相应的文件。如果我点击双倍时间，它会下载两次。任何解决方案。的 HTML：

     <ng-template #tmplt>

    <tr *ngFor="let kbase of Colum | paginate: paginationConfig; let i =index">
        <td>{{isEnglish ? kbase.Name :kbase.Name_AR}}</td>
        <td><span class="sprite eye" (click)="download(kbase.DocId)" ></span></td>
    </tr>
</ng-template>

方式：

  download(id: number) {
        if (id != 0) {
            this._documentService.downloadDcoumentDetails(id, 'KnowledgeHub').subscribe(
                (response: any) => {
                    if (response.content != null) {
                        this.performDownloadFile(response.fileName, response.content);                      
                    }
                }, err => { }, () => {

                });
        }

    }
    performDownloadFile(fileName: string, content: any) {
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.style.display = "none";
        let blob = new Blob([content], { type: "application/octet-stream" });
        let objectUrl = window.URL.createObjectURL(blob);
        a.href = objectUrl;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(objectUrl);
    }

Thanks

Answer 1

向函数download(id)添加一个布尔值，如下所示：

var clicked = false;

function download(id) {
    if(!clicked){
        clicked = true;
        service.get(url).subscribe(function(data){
            clicked = false;
        });
    }
}

这样可以防止在当前下载仍在执行时双击。

Answer 2

欢迎来到Observable's world。只需使用Observable即可获得所需的结果。获取组件中输入的引用并使用此代码。 debounceTime会让事件至少在前一次触发后1 second之后触发。当用户双击时，它将允许您不用每click个触发。

Observable.fromEvent(yourButton, 'click').debounceTime(1000).subscribe(value => /* */)

使用@viewchild（）或类似的东西选择目标按钮

在subscribe方法中，您可以编写逻辑。

Answer 3

您应该创建一个变量来控制是否已经运行下载。

这样的事情：

public downloadInProgress = false;

public download(id: string) {
  if (this.downloadInProgress) {
    return;
  }

  this.downloadInProgress = true;
}

```

然后，一旦从API / Server收到文件，您就可以将false分配给此标记。

如何在角4中单击双击事件？

3 个答案: