Angularでngx-translateを使って多言語対応していたのですが、あるページではうまく翻訳されるのに、あるページでは翻訳されない。
もっと言うと、前のページから遷移して来たときは翻訳されてるけど、リロードしたら翻訳されなくなった!というよくわからない現況に陥りました。
フォルダ構成はこんな感じ
app |— core |— header |— language |— content |— sub_content
言語切り替えの記述はこんな感じ
language.service.ts
import { Injectable } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { Subject } from 'rxjs/Subject'; @Injectable() export class LanguageService { public languageSubject = new Subject<string>(); public languageState = this.languageSubject.asObservable(); constructor(private translate: TranslateService) { const lang = localStorage.getItem('language') || 'ja'; translate.setDefaultLang(lang); translate.use(lang); } setLanguage(lang) { localStorage.setItem('language', lang); const getLang = localStorage.getItem('language'); this.languageSubject.next(getLang); this.translate.setDefaultLang(getLang); this.translate.use(getLang); } }
language.component.ts
export class LanguageComponent { constructor( private languageService: LanguageService ) {} changeLang(lang) { this.languageService.setLanguage(lang); } }
このlanguage
をheader
で呼び出して、content
ではheader
を呼び出して表示してました。
sub_content
はheader
を表示させないページです。
content > header > language
content
のページはうまく翻訳されてます。
リロードしても問題なし。
問題はsub_content
。
content
からページ遷移でsub_content
のページ開いたときは翻訳されてます。
でも、sub_content
のページでリロードすると翻訳されず、翻訳設定用のJSONのキー名だけが表示されます。
GitHub – ngx-translate/core
とか
How to split your i18n file per lazy loaded module with ngx-translate?
を参考にTranslateModule.forChildを使おうとしてみたりしたけど上手くいかず…。
でも、How to split your i18n file per lazy loaded module with ngx-translate?
を見てたら、HomeComponentでthis.translate.use(lang)
をやってる!
そういえばsub_content
はheader
呼び出してないので、language
も呼び出してない。
と言うことはリロードした時にはthis.translate.use(lang)
をやってないということだ!!
と思い、sub_content.component.ts
を修正。
sub_content.component.ts
constructor( private translate: TranslateService ) { const lang = localStorage.getItem('language') || 'ja'; this.translate.use(lang); }
これで無事にsub_content
をリロードしても翻訳されました!!
気づけば単純なんですが、数時間悩んでしまった…。