2016-12-14 67 views
3

我需要在角度初始化之前先做兩個HTTP調用。有什麼方法可以同步初始化角度2嗎?angular2 APP_INITIALIZER同步

請不要說我們的應用程序應該異步工作。 我正在使用「angular-cli」進行通用構建。首先,我需要獲取在json文件中設置的環境,並基於我需要加載配置的環境。所以我需要兩個HTTP調用。

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

內部負載()我有兩個http調用其中一個,但在兩個調用完成之前angular已初始化。

+0

會https://github.com/angular/angular/issues/9047#issuecomment-255597990的工作?小心:APP_INITIALIZER是實驗性的:https://angular.io/docs/ts/latest/api/core/index/APP_INITIALIZER-let.html – Sebastian

+0

@Rohit你能檢查我的答案嗎? – DDRamone

回答

3

你是在一個正確的方式。 您可以將兩個http調用轉換爲config.load()函數。

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); 
       }); 

     }); 

    }); 
} 

考慮的是,功能和lambda表達式是不支持useFactory了,所以你必須重寫它點點。還請確保您提供您的AppConfig

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

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