this is single-default.php
未分類

Agular(ionic)で多言語化対応を行う

環境

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



Copy

参考のサイト

公式ドキュメントはこちら

https://github.com/ngx-translate/core

パッケージのインストール

npm install @ngx-translate/core @ngx-translate/http-loader --save

Copy

package.json

  "dependencies": {
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",

Copy

実装

app.module.ts

こちらにはapp.module.tsでは、TranslateModuleをインポートするだけになりました。とかいてありますが、下記のように書くとエラーでした。

import { TranslateModule } from '@ngx-translate/core';

>imports: [
>  TranslateModule.forRoot()
>],

Copy

そこで

import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule} from '@ngx-translate/core';
・
  imports: [
    HttpClientModule,    
    TranslateModule.forRoot(),
  ],

Copy

としました

使いたい場所のモジュール

使いたい場所のモジュールで

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]
         }
      }),
    ],

Copy

Copy

使いたい場所の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"
}