環境
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
参考のサイト
公式ドキュメントはこちら
https://github.com/ngx-translate/core
パッケージのインストール
npm install @ngx-translate/core @ngx-translate/http-loader --save
package.json
"dependencies": {
"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "^4.0.0",
実装
app.module.ts
app.module.tsにて、TranslateModuleをHttpClientModule, HttpClientと一緒にインポートします．
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(
private translate: TranslateService,
) {
this.translate.setDefaultLang('en');
this.translate.use('en');
}
あとHTMLに
<p>{{ 'HELLO' | translate }}</p>
とかく
assetに情報を配置
最後に
/assets/i18n/
を作成して、jsonファイルをおけばいいです。
{
"HELLO": "こんにちはEnglish"
}
複数の場合はこのように書いてください
{
"Main": "メイン",
"File selection": "ファイルの選択",
"1. Choose a file": "1. ファイルの選択",
"Pick a file from your storage": "ストレージから選択",
"Or take a new picture": "新しく写真を撮る",
"2. Crop your image": "2. 写真の切り抜き",
"select the area you want to analyze from the photo": "解析したいエリアを選択してください",
"No ads 3 times if you watch a short video": "広告が3回表示されなくなります!",
"Preparing for the analysis. Since this app uses service that need to be payed(from not you but me), an ad will be shown to you.":"安全な方法でアップロードします。 このアプリは有料のAPIを使用しているため、広告が表示されます。",
"Analyzing.":"分析しています。"
}
最後のブロックの後にカンマを入れるとエラーになりますので注意．
app.component.htmsも多言語化したい場合
app.module.tsを下記のようにします．
+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({
declarations: [AppComponent],
entryComponents: [],
imports: [
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useFactory: (createTranslateLoader),
+ deps: [HttpClient]
+ }
+ }),
],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule {}
app.component.ts
+import {TranslateService} from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
constructor(
+ private translate: TranslateService,
) {
+ this.translate.setDefaultLang('en');
+ this.translate.use('en');
}
}
