角2はサービスの初期化を待ちます

Question

私はメッセージキーを解決してロケールに応じてメッセージを返すパイプを持っています。

しかし、私のサービスがメッセージの読み込みを完了するまで待つ必要があり、それ以降はメインページのレンダリングを続けます。私のローカリゼーションパイプが使われる場所。 どのように動作させるには？

サービス：

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

} 

Answer 1

[OK]をクリックします。最後に私はそれを働かせました。私はこの答えを見つけ、それが私を助けました。 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... 
}