アンギュラ複数形@ NGX-翻訳し、NGXは、翻訳-のMessageFormat-コンパイラが初期化されません正しく

Question

I行っ次の手順

（1）作成した新しい角度-CLIプロジェクト（角-CLI 1.5.0）

（2）を追加しました依存関係：

npm i @ngx-translate/core @ngx-translate/http-loader messageformat ngx-translate-messageformat-compiler --save 

翻訳と（3）を追加しましたJSONファイル：

は/ I18N/en.json

をアサート

{ 
    "translation": "translation", 
    "things": "{count, plural, =0{Nothing} one{One thing} other{Lots of things}}" 
} 

はI18N/de.json /アサート）

{ 
    "translation": "Übersetzung", 
    "things": "{count, plural, =0{Nichts} one{Ein Ding} other{Viele Dinge}}" 
} 

（4）AppModule

import { AppComponent } from './app.component'; 

export function createTranslateLoader(http: HttpClient) { 
    return new TranslateHttpLoader(http, './assets/i18n/', '.json'); 
} 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HttpClientModule, 
    TranslateModule.forRoot({ 
     loader: { 
     provide: TranslateLoader, 
     useFactory: (createTranslateLoader), 
     deps: [HttpClient] 
     }, 
     compiler: { 
     provide: TranslateCompiler, 
     useClass: TranslateMessageFormatCompiler 
     } 
    }), 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

（5）AppComponent

import { Component } from '@angular/core'; 
import { TranslateService } from '@ngx-translate/core'; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <h1 translate>translation</h1> 
    <p>{{'things' | translate:"{ count: 2 }"}}</p> 
    <button (click)="selectLang('de')">De</button> 
    <button (click)="selectLang('en')">En</button> 
    ` 
}) 
export class AppComponent { 

    constructor(private translate: TranslateService) { 
    translate.setDefaultLang('de'); 
    this.translate.use('de'); 
    translate.addLangs(['en']); 
    } 

    selectLang(lang: string) { 
    this.translate.use(lang); 
    } 

} 

ページが読み込ま問題なくと（ "Überschrift"）しかし、複数形はうまくいきません。ボタン「エン」をクリックすることで、ENに言語を変更

好奇心は、望ましい結果があります。

今

を、バック「デ」に切り替えることで所望の結果を示していますドイツ語も。

Answer 1

この上の任意の更新？ 私が使用している回避策は、テンプレートを表示する前に言語の設定が完了するまで待つことです。

langReady= false; 

    constructor(private translate: TranslateService) { 
    translate.setDefaultLang('de') 
    translate.addLangs(['en']); 
    this.translate.use('de').subscribe(()=>{ 
     this.langReady= true; 
    }); 
    } 

をそして、私のテンプレートで、私は言語は次のように表示される準備ができるまで待つ* ngIf設定します：たとえば、私のappComponentでは、私が設定します

<p *ngIf="timeElapsed">{{'things' | translate:"{ count: 1 }"}}</p> 

を

これはあまり優雅なソリューションではありませんが、機能します。あなたはメッセージコンパイラを設定するより良い方法を見つけましたか？