Angular2：イベントターゲットをクリックすると、無限ループが発生します

Question

私のangular2ウェブサイトからCSVファイルをダウンロードします。このために私はjsonファイルからデータを取得します。パラメータdownloadとhrefが設定されたら、クリックをシミュレートしてダウンロードを開始したいと思います。

ただし、このクリックにより無限ループのダウンロードが発生します... この問題を解決して1つのファイルしかダウンロードできないのはなぜですか？

ここに私の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(); 
    }); 
} 

Answer 1

問題は私の非同期呼び出しでした。 href属性が変更される前にダウンロードが開始されました。

しかし、私はクライアントからファイルをダウンロードすることを選択したので、私は非同期呼び出しを渡さずにファイルを呼び出します。あなたは再帰関数を呼び出している原因

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

Answer 2

この：

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

の「無限ループが発生することはありません。ダウンロード "を実行すると、downloadCSVTemplateを呼び出して無限ループを引き起こします オーバー。

click（）をもう一度呼び出すと、何をしようとしているのか不明です。