Angular 2サービスとしてJavascriptクライアントライブラリを使用しているGoogle APIエンドポイント

Question

Angular 2アプリケーションでGoogle API Javascriptライブラリを使用しています。私はコンポーネントで注入されるサービスを作成しました。ここでは、コードは次のようになります。

import { Injectable } from '@angular/core'; 
const url = 'https://apis.google.com/js/client.js?onload=__onGoogleLoaded'; 
@Injectable() 
export class GoogleAPIService { 
public client: any; 
public calculatorService: any; 
public actionService: any; 
loadAPI: Promise<any> 
     constructor(){ 
     this.loadAPI = new Promise((resolve) => { 
      window['__onGoogleLoaded'] = (ev) => { 
      console.log('gapi loaded'); 
      resolve(window['gapi']); 
      this.client = window['gapi'].client; 
      this.loadEndPoints('{Endpoint URL}/_ah/api'); 
      } 
      this.loadScript(); 
     }); 

     } 

     doSomethingGoogley(){ 
     return this.loadAPI.then((gapi) => { 
      console.log(gapi); 
     }); 
     } 

     loadScript(){ 
     console.log('loading..') 
     let node = document.createElement('script'); 
     node.src = url; 
     node.type = 'text/javascript'; 
     document.getElementsByTagName('head')[0].appendChild(node); 

     } 

     loadEndPoints(apiRoot) { 
    // Loads the OAuth and calculatorendpoint APIs asynchronously, and triggers login 
    // when they have completed. 
    var apisToLoad; 
    var callback = function() { 
    console.log('API Loaded '+apisToLoad); 
    if (--apisToLoad == 0) { 
     //this.endpoint1= this.client.endpoint1; //Doesn't Work 
     //this.endpoint2= this.client.endpoint2; 
    } 

    } 

    apisToLoad = 3; // must match number of calls to gapi.client.load() 
    this.client.load('oauth2', 'v2', callback); 
    this.client.load('endpoint1', 'v1', callback, apiRoot); 
    this.client.load('endpoint2','v1',callback,apiRoot); 

    } 
} 

私は3つの質問を持っている：

1. にはどうすればいいのエンドポイントがサービスにパブリック変数としてgapi.client.endpoint1得るのですか？
2. APIのメソッドを呼び出すにはどうすればよいですか？ JavaScriptを使用すると、gapi.client.endpoint1.method（）を呼び出すことができます。execute（）
3. このサービスをシングルトンにするにはどうすればよいですか？

何か助けていただければ幸いです。

EDIT：

ここでは、サービスの作業バージョンです。私は自分のルートモジュールでプロバイダとして使用します。したがって、アプリケーション全体でシングルトンとして利用できます。

import { Injectable } from '@angular/core'; 

const url = 'https://apis.google.com/js/client.js?onload=__onGoogleLoaded'; 
const gapiOnLoaded = '__onGoogleLoaded'; 
const clientName = 'gapi'; 
const endpointhost = '[HTTPS URL FOR ENDPOINTS]'; 
const apiEndPoint = endpointhost + '/_ah/api'; 
@Injectable() 
export class GoogleAPIService { 
    private gapi: any; 
    private loadAPI: Promise<any>; 
    constructor() { 
    this.loadAPI = new Promise((resolve) => { 
     window[gapiOnLoaded] = (ev) => { 
     this.gapi = window[clientName]; 
     // Loads the OAuth and other APIs asynchronously, and triggers login 
     // when they have completed. 
     let apisToLoad; 
     let callback = function() { 
     if (--apisToLoad === 0) { 
      resolve(window[clientName]); 
      } 
     }; 
     apisToLoad = 3; // must match number of calls to gapi.client.load() 
     this.gapi.load('client:auth2', callback); 
     this.gapi.client.load('[ENDPOINT_1_NAME]', 'v1', callback, apiEndPoint); 
     this.gapi.client.load('[ENDPOINT_2_NAME]', 'v1', callback, apiEndPoint); 
     }; 
     this.loadScript(); 
    }); 
    } 

    public GetClient(): any { 
     return this.loadAPI.then((res) => { 
       return this.gapi; 
      }); 
    } 

    private loadScript() { 
    let node = document.createElement('script'); 
    node.src = url; 
    node.type = 'text/javascript'; 
    document.getElementsByTagName('head')[0].appendChild(node); 
    } 
} 

他のサービスでこのサービスを挿入します。私は各エンドポイントのサービスを作成しました。

@Injectable() 
export class Endpoint1Service { 
    private gapi: any; 
    constructor(private googleApiService: GoogleAPIService) { 
    } 

    public isLoad() { 
     return this.googleApiService.GetClient().then((gapi) => { 
       this.gapi = gapi; 
       return true; 
      }); 
    } 

    public action(data: DataType){ 
     this.gapi.client.endpointname.apimethod(data).execute(); 
    } 
} 

Answer 1

サービスはデフォルトではシングルトンです。あなたのAppModuleでprovideする必要があり、それはあなたのすべてのコンポーネントで利用可能になります。それをコンポーネントコンストラクタに必ず含めてください。

import {NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {HttpModule} from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { routing } from './app.routing'; 
import { GoogleService } from './google.service'; // important 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     HttpModule, 
     routing, 
    ], 
    declarations: [ AppComponent], 
    providers: [ GoogleService ], // important 
    bootstrap: [ AppComponent], 
}) 
export class AppModule { 
} 

あなたのサービスのエンドポイント利用可能外を作成するには、エンドポイントを呼び出す関数の前にpublicキーワードを使用することができます。 angle2でエンドポイントを呼び出すには、@angular/httpの組み込みのhttpサービスを使用できます。ここでは、呼び出すエンドポイントに対してObservableを返すサービス例（HTTP GETのみを使用）を示します。

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Observable } from 'rxjs'; 

@Injectable() 
export class GoogleService { 

    constructor(private http: Http) { } 

    public endpoint1(): Observable<any> { 
     return this.http.get("http://endpoint.one.com"); 
    } 

    public endpoint2(): Observable<any> { 
     return this.http.get("http://endpoint.two.com"); 
    } 

} 

コンポーネントのように、このようなサービスを使用できます。

import { Component, OnInit } from '@angular/core'; 
import { GoogleService } from './google.service'; // important 

@Component({ 
    selector: 'app', 
    templateUrl: 'app.component.html' 
}) 
export class AppComponent implements OnInit { 
    constructor(private googleService: GoogleService) { } 

    ngOnInit() { 

     this.googleService.endpoint1().subscribe(callback1, handleError); 

     this.googleService.endpoint2().subscribe(callback2, handleError); 

    } 

    callback1(data){ 
     // do something with the data from ONE 
    } 

    callback2(data){ 
     // do something with the data from TWO 
    } 

    handleError(error: any){ 
     console.error(error); 
    } 

} 

私は角大学からthis postで観測を使用してビットを読んでお勧めします。

Answer 2

DOMを変更してgapiをロードすることは特に良い方法ではないと思います。おそらくgapiとgapi.authのTypeScript定義をNPMでインストールする方が良いでしょう。

回答方法は、Import gapi.auth2 in angular 2 typescriptに掲載しました。