如何通过 Angular4 下载网页？答案

【问题标题】：How to download a web page via Angular4?如何通过 Angular4 下载网页？
【发布时间】：2017-11-17 19:57:01
【问题描述】：

我想通过 Angular 4 下载一个页面。
实际上我想获取 YouTube 视频的下载链接。
我的代码如下：

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Jsonp, Http, Response } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Youtube Direct';
  youtubeLink = 'https://www.youtube.com/watch?v=wBBzD_pDags&list=PL3ewn8T-zRWgWGtHzwrvO2ZdCExU7wk8M';
  youtubePageHtml: string;

  constructor(private jsonp: Jsonp, private http: Http) { }

  GetButtonOnClick(): void {
    this.jsonp.get(this.youtubeLink)
      .map(this.extractData)
      .catch(this.handleError);      
  }

  private extractData(res: Response) {
    console.log(res);
    let body = res.json();
    return body.data || {};
  }

  private handleError(error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }


}

但extractData 从不打电话。
如何通过 Angular 4 下载页面？

【问题讨论】：

标签： angular http jsonp

【解决方案1】：

因为你需要订阅返回的 observable。

试试这个：

  GetButtonOnClick(): void {
    this.jsonp.get(this.youtubeLink)
      .map(this.extractData)
      .subscribe(
        (res: any) => this.youtubePageHtml = res,
        (err: Error) => this.handleError,
        () => console.log('OnComplete !')
      )
  }

如果您想了解更多相关信息：
- https://angular.io/tutorial/toh-pt6
- https://github.com/ReactiveX/rxjs

【讨论】：