Angular2 Flickr JSONP

Question

我对 AngularJS 很陌生。我正在使用 Angular2 制作 Flickr 公共提要应用程序，但遇到了这个问题。

我找不到让 JSONP 工作的方法。我应该怎么做才能返回 JSON 对象？

这是代码

flickr.service.ts

import { Injectable } from '@angular/core';
import { Jsonp, Http } from '@angular/http'; //use jsonp module to fetch the data from the api call

import 'rxjs/Rx'; // use rxjs as the observable

@Injectable()

export class FlickrService {

  url: string;
  apiKey: string = 'ffed2ef9dede27481c3195eea1be61eb';

  constructor(private _jsonp: Jsonp) {
    this.url = `https://api.flickr.com/services/feeds/photos_public.gne?&api_key=${this.apiKey}&per_page=12&format=json&nojsoncallback=1`;
  }

  getFeed() {
    return this._jsonp.get(this.url)
      .map(res => res.json());
  }

  searchTag(searchTerm: string) {
    return this._jsonp.get(this.url+'&tag='+searchTerm)
      .map(res => res.json());
  }
}

flickr.component.ts

import { Component } from '@angular/core';
import { FlickrService } from '../services/flickr.service';
@Component({
  moduleId: module.id,
  selector: 'flickr',
  templateUrl: './flickr.component.html'
})
export class FlickrComponent {
  feedList: Array<Object>;
  searchList: Array<Object>;
  searchTerm: string;
  constructor(private _flickrService: FlickrService) {
    this._flickrService.getFeed().subscribe(res => {
      console.log(res);
    });
  }
}

Answer 1

对于任何像我一样努力让它工作的人，我终于让它在 Angular 5 中以下列方式工作：

在 app.module.ts 中添加 HttpClientJsonpModule

import {HttpClientModule, HttpClientJsonpModule, HttpClient} from '@angular/common/http';

imports: [
    ...

    HttpClientModule,
    HttpClientJsonpModule
...
]

在我拥有的 api 服务中：

getFlickrFeed() {
    const url = 'https://api.flickr.com/services/feeds/photos_public.gne?format=json&id=YOUR_ID&jsoncallback=JSONP_CALLBACK';

    return this.http.jsonp(url, 'JSONP_CALLBACK').pipe(
            tap(
                data => data
            )
        );
}

在我的模块中：

    this.api.getFlickrFeed().subscribe(
        data => {

            this.flickrFeed = data['items'];

            console.log(this.flickrFeed);
        }
    );

Answer 2

为了让Jsonp 库为我工作，我需要以callback=JSONP_CALLBACK 结束我的查询。因此，请尝试将您的服务更新为此...

import { Injectable } from '@angular/core';
import { Jsonp, Http } from '@angular/http';

import 'rxjs/Rx'; // use rxjs as the observable

@Injectable()

export class FlickrService {

  url: string;
  apiKey: string = 'ffed2ef9dede27481c3195eea1be61eb';

  constructor(private _jsonp: Jsonp) {
    this.url = `https://api.flickr.com/services/feeds/photos_public.gne?&api_key=${this.apiKey}&per_page=12&format=json`;
  }

  getFeed() {
    return this._jsonp.get(this.url+'&callback=JSONP_CALLBACK')
      .map(res => res.json()).catch(this._handleError);
  }

  searchTag(searchTerm: string) {
    return this._jsonp.get(this.url+'&tag='+searchTerm+'&callback=JSONP_CALLBACK')
      .map(res => res.json()).catch(this._handleError);
  }

  private _handleError(error: Response | any) {
    console.log(error);
    return Observable.throw(error.code);
  }
 }

另外，我不能 100% 确定 callback=JSONP_CALLBACK 需要 是否是查询的最后一个参数......但是我读过的任何和所有文档都在那里，所以我刚刚做到了，它对我来说效果很好。