Angular2 Flickr JSONP

Question

Ich bin sehr neu in AngularJS. Ich mache eine Flickr öffentliche Feed-App mit Angular2, aber ich stieß auf dieses Problem.

Ich konnte keinen Weg finden, um JSONP zum Laufen zu bringen. Was muss ich tun, um das JSON-Objekt zurückzugeben?

Hier ist die Codes

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

Um Die Bibliothek Jsonp funktioniert für mich. Ich musste meine Abfragen mit callback=JSONP_CALLBACK beenden. Also versuchen Sie Ihren Dienst zu dieser Aktualisierung ...

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); 
    } 
} 

Auch bin ich nicht 100% sicher, ob die callback=JSONP_CALLBACKBedürfnisse das letzte Argument der Abfrage sein ... Aber jede und alle Unterlagen I‘ Ich habe es schon mal gelesen, also habe ich es einfach gemacht und es hat für mich gut funktioniert.