ionic(angular)国际化多语言i18n配置

1.前言

在写(抄)一个软件,发现别的软件可以多语言,于是打算自己实现一下,看github的https://github.com/ngx-translate/core,对ionic的机制也不是很懂,也在找到中文网上的各类教程,都发现一个问题,跟不上版本更新,都是相对落后的,于是自己摸索了一下,总结出来写一下,但是也比较麻烦的是还是ionic的机制,一个page是相当于一个module(不知道这样的说法对不对),所以跟教程都有点差别,当然只是很小的一部分,使用懒加载(Lazy loaded modules),但仍需要在每个page里的module里再次引入一次,这也是其他库引入应该是同样的原理。

2.安装依赖库

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

3.引入模块

在app.module.ts中引入,这里我理解的是在主module先注入

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule, HttpClient} from '@angular/common/http';
// 这是引入的模块
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {AppComponent} from './app';

// 1.这里是默认情况下,没有可用的加载程序。所以需要自己准备i18n文件并load所在的文件路径和格式。
// 2.路径:../assets/i18n/
// 格式这里要特别注意,github上是./assets/i18n/,但新的ionic是../assets/i18n/原因是前言所说的
// 教程类似,一个module对应一个ts,相当于一个page,所以上级就是assets,实际上是上上级。
// 如果搞不清楚是哪一个可以使用vscode里内置的引导。
// 3.格式:.json
// 4.这里理解成,不用也可以,但是没有加载程序(就是系统语言),就无法翻译成正确的意思。
// AoT requires an exported function for factories
export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}
// 按照说明写
@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            }
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

4.在i18n添加多语言json文件

在assets下,新建文件夹i18n,然后i18n文件夹里再分别创建zh-CN.json、zh-TW.json、en-US.json文件,分别代表中文简体、中文繁体、英文。文件内容示例如下:

zh-CN.json

 "date":{
        "year": "年",
        "month": {
            "self":"月",
            "class":["一月","二月","三月","四月","五月","六月",
                "七月","八月","九月","十月","十一月","十二月"]
                },
        "week": ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
         }

zh-TW.json

 "date":{
        "year": "年",
        "month": {
            "self":"月",
            "class":["一月","二月","三月","四月","五月","六月",
                "七月","八月","九月","十月","十一月","十二月"]
                },
        "week": ["週日", "週一", "週二", "週三", "週四", "週五", "週六"]
        }

en-US.json

"date":{
        "year": "Year",
        "month": {
            "self":"Month",
            "class":["January","February","March","April","May","June",
                "July","August","September","October","November","December"]
        },
        "week": ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"]
        }

5.在要使用translate的page上引入并使用

(1) 在要使用translate的page文件夹里的xx.module.ts文件上引入Translatemodule(最重要的一步)

// 1.引入
import {TranslateModule} from '@ngx-translate/core';
@NgModule({
    imports: [
        // 2.声明
        TranslateModule
    ],
})

(2)在app.component.ts文件上引入TranslateService

//1.引入
import { TranslateService } from '@ngx-translate/core';
export class AppComponent {
  constructor(
    //2.声明
    public translate: TranslateService
  ) {}

  public async ngOnInit() {
    //3.由于一直没有初始化,所以需要在这里先声明,如果在其他地方已经声明应该不需要再次声明
    this.translate.setDefaultLang('zh-CN');
  }
}

(3)在任意模块中添加如下代码

<!-- 由于json一般都是多层嵌套式的,具体使用 -->
<!-- eg.1 输入:年-->
<h1>{{'date.year' | translate}}</h1>
<!-- eg.2 输出:月-->
<h1>{{'date.month.self' | translate}}</h1>
<!-- eg.3 输出:一月,数组从0开始-->
<h1>{{'date.month.calss.1' | translate}}</h1>
tag(s): none
show comments · back · home
Edit with Markdown