Angular 2讓它等待服務初始化

我有一個管道解析消息密鑰並相應地返回消息到語言環境。Angular 2讓它等待服務初始化

但我想角等待直到我的服務將完成它的加載消息，並且只有在那之後繼續呈現主頁面。我的本地化管道在哪裏使用。如何讓它工作？

服務：

@Injectable() 
export class I18nService implements OnInit { 

    private cachedMessages: {string: string}; 

    activeLocale:I18Enum = null; 

    constructor(private http: Http) { 
     this.reloadLocale(I18Enum.ru); 
    } 

    ngOnInit(): void { 
     this.reloadLocale(I18Enum.ru); 
    } 

    getMessage(key: string) { 
     if (this.cachedMessages) { 
      return this.cachedMessages[key]; 
     } 
    } 

    reloadLocale(locale: I18Enum) { 
     this.activeLocale = locale; 
     this.http.get(basePath + i18nPath + I18Enum[locale]).subscribe(
      res => { 
       this.cachedMessages = res.json(); 
      } 
     ); 
    } 
}

和管道：

@Pipe({name: 'i18nPipe'}) 
export class I18nPipe implements PipeTransform { 

    constructor(private i18Service: I18nService) { 
    } 

    transform(value: any, args: any): any { 
     return this.i18Service.getMessage(value); 
    } 

}

來源

2016-11-14 Simon

可能複製[如何將從後端呈現的參數傳遞給angular2引導方法]（http://stackoverflow.com/questions/37611549/how-to-pass-parameters-rendered -from-後端到angular2的自舉方法） – estus

確定。最後我讓它工作。我找到了這個答案，它幫助了我。 https://stackoverflow.com/a/40379803/5203127

所以我的代碼現在看起來如下：

服務：（加入的initMessages法）

@Injectable() 
export class I18nService { 

    private cachedMessages: {string: string} = null; 

    activeLocale: I18Enum = null; 

    constructor(private http: Http) { 

    } 

    getMessage(key: string) { 
     if (this.cachedMessages) { 
      return this.cachedMessages[key]; 
     } 
    } 

    reloadLocale(locale: I18Enum) { 
     this.activeLocale = locale; 
     this.http.get(basePath + i18nPath + I18Enum[locale]).subscribe(
      res => { 
       this.cachedMessages = res.json(); 
      } 
     ); 
    } 

    initMessages(locale: I18Enum) { 
     this.activeLocale = locale; 

     return new Promise((resolve, reject) => { 
      this.http.get(basePath + i18nPath + I18Enum[locale]).map(res => res.json()).catch((error: any): any => { 
       reject(false); 
       return Observable.throw(error.json().error || 'Server error'); 
      }).subscribe((callResult: {string: string}) => { 
       this.cachedMessages = callResult; 
       resolve(true); 
      }); 

     }); 
    } 
}

我舉：（加入APP_INITIALIZER提供商）

@NgModule({ 
     imports: [..., HttpModule, ...], 
     declarations: [..., 
      I18nPipe 
     ], 
     bootstrap: [AppComponent], 
     providers: [..., I18nService, 
      { 
       provide: APP_INITIALIZER, 

      // useFactory: (i18NService: I18nService) =>() => i18NService.initMessages(I18Enum.ru), 
      // or 
      useFactory: initApp, 

      deps: [I18nService], 
      multi: true 
     } 
    ] 
}) 
export class TopJavaModule { 

} 

export function initApp(i18nService: I18nService){ 
    // Do initing of services that is required before app loads 
    // NOTE: this factory needs to return a function (that then returns a promise) 
    return() => i18nService.initMessages(I18Enum.ru); // + any other services... 
}

來源

2016-11-14 16:05:57 Simon

Angular 2讓它等待服務初始化

回答

相關問題