サービスに加入した後のAngular2の翻訳

Question

私は子コンポーネントを持つ親コンポーネントを持っていますが、私はそれをAPIから取得するユーザー言語に基づいてテキストを翻訳したいと思います。

transform(value : string, args: any[]) : any 
{ 
    if (!value) return ; 
    return this._translationService.translate(value) ; 
} 

ここ

export class TranslationService { 

    private _currentLang: string = 'en'; 

    public use(langId: number): void { 
     this._currentLang = langId == 0 ? 'fr' : 'en'; 
    } 


    public translate(key: string) { 
     //tranlsation happens here 

    } 
} 

翻訳サービスは、そのがでngOnInitでLANGID（）

ngOnInit() : void 
{ 

    this._langService.getLanguageId(this.userId) 
        .subscribe(langId=> { this._translationService.use(langId); }); 
    } 

} 

を取得して親コンポーネントは次のとおりです。ここで

変換方法私の翻訳パイプであります親と子のコンポーネントテンプレート私はこれをパイプとして使用しました：

<div >{{ 'Caption_Key' | translation }}</div> 

子コンポーネントは翻訳サービスの言語を設定する前にキャプションを翻訳しています。しかし、親コンポーネントの変換は正常に動作しています。私は呼び出しが非同期であることがわかりますが、変換が行われる前に子コンポーネントが正しい言語を持つことをどうすれば保証できますか？

私はEventEmitterとサービスで使用（LANGID）を呼び出すとき、イベントを発するを使用しようとした、そのイベントにサブスクライブするパイプを作ったが、それは動作しませんでした...

Answer 1

の場合子コンポーネントは翻訳が正しく機能するように依存します。その言語を知るまで、子コンポーネントをインスタンス化しないことを検討する価値があります。

this._langService.getLanguageId(this.userId) 
    .subscribe(langId => { 
    this._translationService.use(langId); 
    this.translationSet = true; 
    }); 
} 

<child-component *ngIf="translationSet"></child-component>

EDIT：

よりスケーラブルなアプローチがthis._translationService.use言語を設定し、すべてのコンポーネントが言語設定に加入した後translationSubject.emit(language)を行う持っているだろう。

Answer 2

APP_INITIALIZERを使用し、そこにすべてのブートストラップ前の設定を実行することを検討してください。あまりにも多くの例がありますので、ここでコピー/貼り付けはしたくありません。基本的には、APP_INITIALIZER、適切に設定されている場合（たとえば、5つのバックエンド要求を実行する必要があるにも関わらず、約束を1回返す必要があります）、第1コンポーネントが実行される前に実行されます。constructor ed