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をリロードしても翻訳されました!!
気づけば単純なんですが、数時間悩んでしまった…。
