从 Vanilla JS JSONP 回调调用 Angular 5 服务方法

Question

我正在通过服务方法调用 Flickr API。 Flickr 期望有一个名为 jsonFlickrFeed 的全局函数表达式可用，我已将其放置在我的应用程序根 index.html 文件中，紧跟在根组件之后和结束 body 标记之前。我需要将来自 Vanilla JS 回调的响应传递回原始服务。

回调很好，但我真的很难找到任何信息如何返回与 Angular 5.

特别相关的服务

这是我的服务

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import 'rxjs/add/operator/map';

import * as validResponse from './mock/valid.json';
import {FlickrItem} from "./flickr-item";
import {FlickrResponse} from "./flickr-response";

@Injectable()
export class FlickrService {
    private url: string = 'https://api.flickr.com/services/feeds/photos_public.gne?format=json';
    private items: FlickrItem[];
    private response: FlickrResponse;

    constructor(private http: HttpClient) { }

    getValid() {
        // Return mock response
        // For development / debug use only
        // return validResponse;

        this.http.jsonp(this.url, 'jsonFlickrFeed').subscribe();
    };
}

Answer 1

如这里所述：

您可以使用 window:

在服务内部定义回调

@Injectable()
export class FlickrService {
...
  constructor(...) {
    window.jsonFlickrFeed = data => {
      // do something
    }
  }
}

从 Vanilla JS JSONP 回调调用 Angular 5 服务方法

Call Angular 5 service method from Vanilla JS JSONP callback

javascript

jsonp

angular

angular5