如何通过Angular4下载网页?

时间:2017-06-15 10:46:51

标签: angular http jsonp

我想通过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下载页面?

1 个答案:

答案 0 :(得分:2)

这是因为您需要订阅返回的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