Agular(ionic）で多言語化対応を行う
by
クリエイターとエンジニアを応援するNP-Systems@個人開発
環境
Ionic:
Ionic CLI: 6.4.1 (/Users/myName/.nodebrew/node/v12.10.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.1.1
@angular-devkit/build-angular : 0.901.6
@angular-devkit/schematics: 9.1.6
@angular/cli : 9.1.6
@ionic/angular-toolkit : 2.2.0
Utility:
cordova-res (update available: 0.14.0) : 0.9.0
native-run (update available: 1.0.0) : 0.2.9
System:
NodeJS : v12.10.0 (/Users/masaya/.nodebrew/node/v12.10.0/bin/node)
npm : 6.14.2
OS : macOS Mojave
参考のサイト
公式ドキュメントはこちら
パッケージのインストール
npm install @ngx-translate/core @ngx-translate/http-loader --savepackage.json
"dependencies": {
"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "^4.0.0",実装
app.module.ts
こちらにはapp.module.tsでは、TranslateModuleをインポートするだけになりました。とかいてありますが、下記のように書くとエラーでした。
import { TranslateModule } from '@ngx-translate/core';
>imports: [
> TranslateModule.forRoot()
>],そこで
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule} from '@ngx-translate/core';
・
imports: [
HttpClientModule,
TranslateModule.forRoot(),
],としました
使いたい場所のモジュール
使いたい場所のモジュールで
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, '../../assets/i18n/', '.json');
}@NgModule({
imports: [
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
],使いたい場所のtsファイル
import {TranslateService} from '@ngx-translate/core'; constructor(
public translate: TranslateService,
) {
this.translate.setDefaultLang('spanish');
this.translate.use('spanish');
}
あとHTMLに
<p>{{ 'HELLO' | translate }}</p>とかく
assetに情報を配置
最後に
/assets/i18n/
を作成して、jsonファイルをおけばいいです。
{
"HELLO": "こんにちはsplanish"
}