ng2-translate - OnPushチェンジ検出を使用してコンポーネント内の翻訳文字列が更新されない

Question

私のアプリケーションの言語を最初に変更すると、翻訳サービスは新しい言語を表すファイルを要求します。正しくは、純粋な/愚かなものはありませんが、以前の言葉にとどまりません。しかし、いったん新しい言語ファイルがキャッシュにロードされても、言語を変更し続けると、すべて正常に動作しているようです。

純粋なコンポーネントは、新しい言語ファイルのajaxレスポンスからの更新を解決していないようです。ファイルがキャッシュに既にロードされている場合にのみ言語を正しく変更します。ここでも、これはChangeDetectionStrategy.OnPushを使用しているコンポーネントのみです

私はダムコンポーネントのInputsとObservablesを使用してchangeDetectionを理解していますが、この場合パイプについてはあまりよく分かりません。おそらく私は何かを逃している？私は修正をハックする管理している

UDPATE

、それは素晴らしいではありませんが、それは動作します。これは翻訳サービスをラップする私のサービスのコンストラクタです。

私が選択しようとしている言語のキャッシュに既にjsonファイルがあるかどうかを確認します。もし私がそれを持っていなければ、私はng2-translateの 'reloadLang'メソッドを使ってそれを取得します。私はそれを持っていると私は空のタイムアウトを使用し、次に 'translate.use'を呼び出します。タイムアウトが発生すると動作しませんので、どこかでタイミングの問題があります。 翻訳ファイルがすでにある場合は、私はちょうどtranslate.useを通常どおり使用し、すべて正常に動作します。

constructor(private translate: TranslateService, public store: Store<any>) { 
// this language will be used as a fallback when a translation isn't found in the current language 
translate.setDefaultLang('en'); 
// subscribe to changes 
store.select('i18n').subscribe((state: MultilingualStateI) => { 
    // update ng2-translate which will cause translations to occur wherever the TranslatePipe is used in the view 
    if (this.translate.getLangs() && (this.translate.getLangs().indexOf(state.lang) > -1)) { 
    this.translate.use(state.lang) 
    } else { 
    this.translate.reloadLang(state.lang).take(1).subscribe(() => { 
     setTimeout(() => this.translate.use(state.lang), 0); 
    }); 
    } 
}); 

}

私はここで何が起こっているのか全くわからないが、ChangeDetectionStrategy.OnPushと翻訳ファイルを要求してからの新鮮な応答を使用してのミックスのようです。誰かがこれを見ている場合は、あなたの入力を追加してください。

Answer 1

この問題が発生しました。私はいくつかのグラフ（私はng2-chartsを使用しています）と、言語を変更したとき（例えば、enからesへ）、すべてのラベルはグラフ以外のものが更新されています。グラフを新しい言語で更新するには、遅れを再度esに変更する必要がありました（言語を最初に変更するにはダブルクリックしてください）。

あなたの問題と回避策を読んだ後、私はそれをチェックして、あなたが指摘したように、キャッシュが問題であることを確認しました。初めて言語を変更すると、JSONがロードされますが、キャッシュにないため、すべてのコンポーネントが翻訳されるわけではありません（私の場合、チャートは正しく更新されませんでした）。 2回目に同じ言語に変更すると、ラベルはすでにキャッシュに入っているため、正しく動作します。

私は、サービス初期化時に利用可能なすべての言語をロードすることによってそれを修正：私の場合は

constructor(private translate: TranslateService) { 
    var navigatorLanguage = (window.navigator.userLanguage || window.navigator.language).toLowerCase().split("-")[0]; 
    // this language will be used as a fallback when a translation isn't found in the current language 
    translate.setDefaultLang(navigatorLanguage); 
    // the lang to use, if the lang isn't available, it will use the current loader to get them 
    translate.use(navigatorLanguage) 
    // Hack to load all languages 
    // If we don't do this, the first time we change language not all elements are properly translated 
    translate.reloadLang('en') 
    translate.reloadLang('es') 
} 

を、私はこれら二つの言語を持っています。もっと多くのものがあれば、おそらくいくつかのforループがすべてのlangをリロードするのに便利です:)