Angular 2でファイルをダウンロードするにはどうすればよいですか？

Question

私は、電話の録音をブラウズしてダウンロードするためのアプリケーションを作成しています。

このアプリケーションの一部には、記録と関連情報を表示する* ngForが設定されたテーブルがあります。テーブルの各行には、ダウンロード用の記録にマークするためのチェックボックスもあります。私は、私が使用しているテストmp3sへのリンクをconsole.logにすることができるようになりましたが、実際に上記mp3のダウンロードをどのようにトリガーするのか分かりません。

これは、Typescriptを使用してjQueryを使用せずに行うことができます。

<table> 
     <thead> 
      <tr> 
       <th> 
        <input type="checkbox" [checked]="isAllChecked()" (change)="checkAll($event)"> </th> 
       <th>Date</th> 
       <th>Time</th> 
       <th>Duration</th> 
       <th>Calling Number</th> 
       <th>Called Number</th> 
       <th> </th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr *ngFor="let entry of recordingsList"> 
       <td> 
        <input type="checkbox" [(ngModel)]="entry.isSelected"> </td> 
       <td>{{entry.date}}</td> 
       <td>{{entry.time}}</td> 
       <td>{{entry.duration}}</td> 
       <td>{{entry.callingNumber}}</td> 
       <td>{{entry.calledNumber}}</td> 
       <td> 
        <button (click)="openPlayer(entry)" class="play-button"><i class="material-icons">play_arrow</i></button> 
       </td> 
      </tr> 
     </tbody> 
    </table> 

-

// Download selected recordings 

    downloadSelected() { 
     let isSelected = this.recordingsList.filter(x => x.isSelected); 
     isSelected.forEach(x => console.log(x.audio)); 
    } 

-

どのような援助が大幅に高く評価されています。

Answer 1

直接質問に答える、あなたはすべてのリンクのための新しいタブを開くことができます。

downloadSelected() { 
     let isSelected = this.recordingsList.filter(x => x.isSelected); 
     isSelected.forEach(x => window.open(x.audio, '_blank')); 
    } 

はしかし、これは複数のタブが乱暴に開けると用語のユーザーエクスペリエンスで優雅ではありません。そこで、選択したファイルを含むzipフォルダを作成してダウンロードさせる特別なURL（ex：example.com/bulk-download?ids=1,34,56）を作成することをお勧めします。