Angular2：单击事件目标会导致无限循环答案

【问题标题】：Angular2 : click on event target causes an infinite loopAngular2：单击事件目标会导致无限循环
【发布时间】：2017-06-10 21:49:55
【问题描述】：

我想从我的 angular2 网站下载一个 csv 文件。为此，我从 json 文件中获取数据。配置好参数 download 和 href 后，我想模拟点击启动下载。

但是这个点击会导致下载的无限循环...... 如何解决这个问题并只下载一个文件？

这是我的 component.html 代码：

<div>
    <a class="csv-template" (click)="downloadCSVTemplate($event)">Dowload File</a>
</div>

我的 component.ts 代码：

downloadCSVTemplate(event) {
let locale = this.navContextSrvc.locale;

this.http
    .get('assets/csv/template_'+ locale +'.json')
    .subscribe(res => {
        event.target.download = 'template_'+ locale +'.csv';
        event.target.href = 'data:text/csv;charset=utf-8,'
        + encodeURIComponent(res._body);
        event.stopPropagation();
        event.target.click(); // causes infinite loop of download
        event.preventDefault();
    });
}

【问题讨论】：

因为您正在递归调用该函数。每次点击你都会调用downloadCSVTemplate，这个函数会触发click
当您有一个从自身内部发送另一个点击的点击处理程序时，您期望会发生什么？本质上，您已经编写了一个在没有任何终止条件的情况下调用自身的函数。这是一个明显的无限循环，您需要消除它。
为什么不在标记中分配适当的属性？
当我点击我的链接时，我尝试下载一个空文件，因为我没有时间获取我的数据。这就是为什么我想在最后模拟一次点击。但现在我不知道该怎么做
只是避免在点击事件调用的同一个函数中调用点击。

标签： javascript csv angular typescript

【解决方案1】：

这个：

event.target.click(); // causes infinite loop of download

不会导致“下载无限循环”，它会通过反复调用 downloadCSVTemplate 导致无限循环。

不清楚你想通过再次调用 click() 来做什么。

【讨论】：

【解决方案2】：

问题是我的异步调用。下载是在我的 href 属性更改之前启动的。

但是，因为我选择从客户端下载文件，所以我只调用文件而不通过异步调用。有了这个，我的更改后启动下载

这里是代码：

downloadCSVTemplate(event) {
    let locale = this.navContextSrvc.locale;
    event.target.download = 'template_'+ locale +'.csv';
    event.target.href = 'assets/csv/template_'+ locale +'.csv';
}

【讨论】：