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

【问题标题】：Call Angular 5 service method from Vanilla JS JSONP callback从 Vanilla JS JSONP 回调调用 Angular 5 服务方法
【发布时间】：2018-08-09 11:07:55
【问题描述】：

我正在从服务方法调用 Flickr API。 Flickr 期望有一个名为jsonFlickrFeed 的全局函数表达式可用，我已将它放在我的应用程序根index.html 文件中，紧跟在根组件之后和结束正文标记之前。我需要将 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();
    };
}

【问题讨论】：

标签： javascript angular jsonp angular5

【解决方案1】：

如这里所说：Communication between angular 2 and pure javascript

您可以使用窗口在服务内部定义回调：

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

【讨论】：