Der beste Weg zu warten, bis die JS-Bibliothek von Drittanbietern die Initialisierung im Angular 2-Service beendet?

Question

Ich wickle eine JS-Bibliothek von Drittanbietern in einen Angular-Dienst ein. Wie kann ich garantieren, dass die JS-Bibliothek von Drittanbietern geladen/initialisiert wird/etc. bevor ich meinen Service nutze?

Können Sie einen Blick auf den folgenden Code und sagen Sie mir, ob dies eine gute Codierung Praxis ist? Ich richte ein Versprechen im Konstruktor des Services ein (Versprechen, das irgendwann erfüllt wird), und ich habe die Service-Methoden abhängig von dem Erfolg dieses Versprechens (siehe getMessages).

@Injectable() 
export class GmailService { 

    private _readyPromise; 

    // Load Gmail API client library. 
    // gapi.client.load() returns a promise. 
    constructor() { 
    this._readyPromise = gapi.client.load('gmail', 'v1'); 
    } 

    private ready():Promise { 
    return this._readyPromise; 
    } 

    // Return Gmail messages for the current user. 
    getMessages() { 
    return this.ready().then(() => { 
     return gapi.client.gmail.users.messages.list({ 
     'userId': 'me' 
     }).then(resp => console.log(resp)); 
    }); 
    } 
} 

In diesem exemple, verwende ich die Google Mail-API für JavaScript und es stellt sich heraus, dass gapi.client.load() bereits ein Versprechen gibt, die den Code vereinfacht. In einem anderen Szenario hätte ich mein eigenes Versprechen erstellen und es manuell erfüllen können, wenn eine bestimmte Bedingung erfüllt ist.

Answer 1

Ihr Ansatz scheint in Ordnung! Eine andere wäre Ihre Anwendung nach Ihrer Google Mail-API-Bibliothek Bootstrap geladen:

var app = platform(BROWSER_PROVIDERS) 
    .application([BROWSER_APP_PROVIDERS, appProviders]); 

gapi.client.load('gmail', 'v1').then(() => { 
    return app.bootstrap(AppComponent); 
}); 

diese Weise werden Sie sicher sein, dass die Bibliothek bereit ist, wenn es in Ihrer Anwendung verwenden.

Hier ist ein entsprechender Plunkr, der den globalen Ansatz beschreibt: https://plnkr.co/edit/ooMNzEw2ptWrumwAX5zP?p=preview.