2022/09/01〜世界旅暮らし中 旅経路はこちら

Angular ngx-translateで翻訳できたりできなかったり

angular
  • URLをコピーしました!

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);
}
}

このlanguageheaderで呼び出して、contentではheaderを呼び出して表示してました。
sub_contentheaderを表示させないページです。

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_contentheader呼び出してないので、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をリロードしても翻訳されました!!

気づけば単純なんですが、数時間悩んでしまった…。

angular

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次