Ionic多语言化

Posted 2023-03-13

好久没碰ionic这个坑了，前两天突然想整个APP玩下，正好把这一套回顾下

版本号：

node -v
v8.10.0

ionic -v
4.1.2

cordova -v
8.0.0

C:\\Users\\gx_143>ng -v

     _                      _                 ____ _     ___
    / \\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \\ | _ \\ / _` | | | | |/ _` | __|   | |   | |    | |
  / ___ \\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \\_\\_| |_|\\__, |\\__,_|_|\\__,_|_|       \\____|_____|___|
                |___/


Angular CLI: 6.2.2
Node: 8.10.0
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.8.2
@angular-devkit/core         0.8.2
@angular-devkit/schematics   0.8.2
@schematics/angular          0.8.2
@schematics/update           0.8.2
rxjs                         6.2.2
typescript                   2.9.2

yarn -v
1.9.4

版本不一致是产生坑的很大一个原因！

一、创建项目

ionic start demo tabs

二、package.json中的"@ionic/app-scripts": "3.2.0",改成

"devDependencies": 
    "@ionic/app-scripts": "3.1.6",
    "typescript": "2.6.2"
  ,

npm install --save @ionic/app-scripts@3.1.6

2. 使用npm安装ngx-translate模块

npm install --save @ngx-translate/core@8.0.0
npm install --save @ngx-translate/http-loader@^2.0.0

最好是带上版本号，不然可能不兼容！

3、在项目中导入支持的包

import  TranslateHttpLoader  from @ngx-translate/http-loader;
import  HttpClient, HttpClientModule  from @angular/common/http;

//导出加载函数
export function HttpLoaderFactory(http: HttpClient) 
  return new TranslateHttpLoader(http, ./assets/i18n/, .json);

4、功能设置

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,
    TranslateModule.forRoot(
      loader: 
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      
    )
  ],

 

5、在assets文件夹下新建i18n文件夹，并且新建两个语言的json文件。

比如zh-CN.json和en.json

//zh-CN.json

  "welcome": "欢迎使用本应用",
    "hello": "你好",
      "get-lang": "获取语言类型"


//en.json

  "welcome": "welcome to this app",
    "hello": "Hola"

json文件是key-value形式的，key值代表要翻译的字符串，value值为特定语言的翻译结果，不用语言的文件一般key值是相同的，只是value值不同。

6、然后在相应的组件中使用Translate服务

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private translate: TranslateService) 
    platform.ready().then(() => 
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    );

    //添加语言支持
    translate.addLangs([zh-CN, en]);
    //设置默认语言，一般在无法匹配的时候使用
    translate.setDefaultLang(zh-CN);

    //获取当前浏览器环境的语言比如en、 zh
    let broswerLang = translate.getBrowserLang();
    translate.use(broswerLang.match(/en|zh-CN/) ? broswerLang : zh-CN);
  
  changeLang(lang) 
    console.log(lang);
    this.translate.use(lang);
  
  toggleLang() 
    console.log(this.translate.getBrowserLang());
    //获取语言风格，相当于更详细的语言类型，比如zh-CN、zh-TW、en-US
    console.log(this.translate.getBrowserCultureLang());
  

7、示例模板：

<div>
  <h2> title | translate </h2>
  <label>
     hello | translate 
    <select #langSelect (change)="changeLang(langSelect.value)">
      <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">
        lang </option>
    </select>
  </label>
</div>
<button (click)="toggleLang()">get-lang | translate</button>

8、效果：

  

使用方式和angularjs1中的ng-translate类似，使用translate管道。

ionic cordova platform add android

ionic cordova build android

参考：Angular2国际化

作者：小孩真笨