2016-12-14 5 views
3

Ich muss zwei HTTP-Aufruf nacheinander vor eckigen initialisieren. Gibt es eine Möglichkeit, Winkel 2 synchron zu initialisieren?angular2 APP_INITIALIZER synchron

Bitte sagen Sie nicht, unsere App sollte asynchron arbeiten. Ich arbeite an generischen Build mit "Angular-CLI". Zuerst muss ich die Umgebung holen, die in einer JSON-Datei eingestellt ist und auf der Grundlage dieser Umgebung muss ich die Konfiguration laden. Also brauche ich zwei HTTP-Aufrufe.

{ 
provide: APP_INITIALIZER, 
    useFactory: (config: AppConfig) =>() => config.load(), 
    deps: [AppConfig], multi: true 
} 

Inside load() Ich habe zwei http Aufruf einer innerhalb anderer aber vor zwei Aufruf erhalten abgeschlossen Winkel wird initialisiert.

+0

https://github.com/angular/angular/issues/9047#issuecomment-255597990 arbeiten? Vorsicht: APP_INITIALIZER ist experimentell: https://angular.io/docs/ts/latest/api/core/index/APP_INITIALIZER-let.html – Sebastian

+0

@Rohit können Sie meine Antwort überprüfen? – DDRamone

Antwort

3

Sie sind auf einem richtigen Weg. Sie können beide HTTP-Aufrufe in die Funktion config.load() einfügen.

public load() { 
    return new Promise((resolve, reject) => { 
     this.http.get('first.json').map(res => res.json()).catch((error: any):any => { 

      console.error('Error at first call'); 

      resolve(error); 
      return Observable.throw(error.json().error || 'Server error'); 
     }).subscribe((firstResponse) => { 

      let request = this.http.get('second.json'); 

      request 
       .map(res => res.json()) 
       .catch((error: any) => { 
        console.error('Error at second call'); 
        resolve(error); 
        return Observable.throw(error.json().error || 'Server error'); 
       }) 
       .subscribe((secondResponse) => { 

        //Here i have both 
        firstResponse, secondResponse 

        resolve(true); 
       }); 

     }); 

    }); 
} 

Betrachten Sie die Tatsache, dass die Funktionen und Lambda-Ausdrücke sind nicht mehr zu useFactory unterstützt, so dass Sie es wenig neu zu schreiben. Stellen Sie außerdem sicher, dass Sie Ihre AppConfig

function initialConfigLoad(config: AppConfig) { 
    return() => config.load(); 
}; 

providers: [ 
    ... 
    AppConfig, // <- Provide AppConfig 
    { 
     provide: APP_INITIALIZER, 
     useFactory: initialConfigLoad, 
     deps: [AppConfig], 
     multi: true 
    } 
]