[解決済み】Angular2以上でファイルをダウンロードする方法

質問

私はWebApi / MVCアプリを持っており、そのためにangular2クライアントを開発しています（MVCを置き換えるために）。Angularがファイルを保存する方法を理解するのに苦労しています。

リクエストは問題ないのですが（MVCで問題なく動作し、受信したデータを記録することができます）、ダウンロードしたデータを保存する方法がわかりません（私はほとんど この記事 ). 私はそれが愚かなほど単純であることを確信していますが、今のところ私は単にそれを把握していません。

コンポーネント関数のコードは以下の通りです。いろいろな方法を試してみましたが、私が理解した限りでは、ブロブ方式がいいようです。 createObjectURL で URL . の定義も見つからない。 URL をウィンドウズで表示させることができますが、どうやら存在するようです。もし私が FileSaver.js モジュール 同じエラーが出ます。ということは、最近変わったか、まだ実装されていないものなのでしょう。A2でファイル保存をトリガーするにはどうしたらいいのでしょうか？

downloadfile(type: string){

    let thefile = {};
    this.pservice.downloadfile(this.rundata.name, type)
        .subscribe(data => thefile = new Blob([data], { type: "application/octet-stream" }), //console.log(data),
                    error => console.log("Error downloading the file."),
                    () => console.log('Completed file download.'));

    let url = window.URL.createObjectURL(thefile);
    window.open(url);
}

念のため、データを取得するサービスを以下に示しますが、このサービスはリクエストを発行し、成功すればマッピングなしでデータを渡すだけです。

downloadfile(runname: string, type: string){
   return this.authHttp.get( this.files_api + this.title +"/"+ runname + "/?file="+ type)
            .catch(this.logAndPassOn);
}

解決方法は？

問題は、observable が別のコンテキストで実行されるため、URL var を作成しようとすると、空のオブジェクトが作成され、必要な blob が作成されないことです。

これを解決する方法は数多く存在するが、そのうちの1つが次のようなものである。

this._reportService.getReport().subscribe(data => this.downloadFile(data)),//console.log(data),
                 error => console.log('Error downloading the file.'),
                 () => console.info('OK');

リクエストの準備ができると、次のように定義された関数 "downloadFile" が呼び出されます。

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'text/csv' });
  const url= window.URL.createObjectURL(blob);
  window.open(url);
}

もし、新しいウィンドウが開かない場合は、'rxjs/Rx' をすでにインポートしていることを確認してください。

import 'rxjs/Rx' ;

お役に立てれば幸いです。