1. Ionic2 多语言支持

看了半天的Angular2官方文档，没有搞太明白，主要原因是官方使用的是SystemJs而不是Webpack。经过曲折的经历，终于找到了一个非常适合Ionic2翻译的插件－－ng2-translate。使用起来非常简单，尤其是对于ionic。(附上官方文档链接:http://ionicframework.com/docs/v2/resources/ng2-translate/)

  1. 安装ng2-translate：

    npm install ng2-translate --save

  2. 修改/src/app/app.module.ts
    加入以下代码：

    1
    2
    3
    4
    5
    import {HttpModule, Http} from '@angular/http';
    import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate/ng2-translate';
    export function createTranslateLoader(http: Http) {
    	return new TranslateStaticLoader(http, 'assets/i18n', '.json');
    }

    更改import部分：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @NgModule({
    imports: [
      TranslateModule.forRoot({
       provide: TranslateLoader,
       useFactory: (createTranslateLoader),
       deps: [Http]
       })
    ]
    })

  3. 修改/src/app/app.component.ts

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    import {TranslateService} from 'ng2-translate';
    @Component({
      templateUrl: 'app.html'
    })
    export class MyApp {
      rootPage = HomePage;

      constructor(platform: Platform, 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.setDefaultLang('cn');
        translate.use('cn');
      }
    }

  4. 使用方法
    使用方法很简单，参考ng2-translate介绍即可

本文地址： http://tingtingli911.github.io/2016/12/05/初学ionic/