首页 > 其他 > 详细

Angular2 Ionic2 学习记录

时间:2017-07-31 22:49:41      阅读:541      评论:0      收藏:0      [点我收藏+]

转载请注明出处:http://www.cnblogs.com/shamoyuu/p/angular2_ionic2.html

 

一、建立项目

ionic start ProductName super

super是ionic提供的一个拥有完整功能的小项目,可以参考学习,如果想创建空项目就用

ionic start ProductName blank

当然参数还有很多,比如--no-git等等,可以通过下面的指令查看

ionic start --help

技术分享

 

二、添加i18n国际化

首先安装需要的依赖,这个版本号是基于@angular/core@4.1.3的,如果@angular/core升级了,这里也应该对应去升级,在添加依赖的时候会提示它需要支持的版本号

cnpm install --save @ngx-translate/core@6.0.1
cnpm install --save @ngx-translate/http-loader@0.0.3"

然后新建 src/assets/i18n/zh.json 文件

然后在app.module.ts文件中引入

import {HttpModule, Http} from @angular/http;
import {TranslateModule, TranslateLoader} from @ngx-translate/core;
import {TranslateHttpLoader} from @ngx-translate/http-loader;

在最上面添加下面的方法

//translate加载器需要知道从ionic的哪个静态管道加载i18文件
export function HttpLoaderFactory(http: Http) {
  return new TranslateHttpLoader(http, ./assets/i18n/, .json);
}

修改imports

imports: [
  BrowserModule,
  HttpModule,
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [Http]
    }
  }),
  IonicModule.forRoot(MyApp)
],

到此就引入完成,然后就可以用了TranslateService

 

打开app.component.ts文件,引入TranslateService,然后把它添加到构造器的引用里面private translateService: TranslateService

import {TranslateService} from @ngx-translate/core;

添加一个方法

initTranslate(){
  this.translateService.setDefaultLang(zh);

  if (this.translateService.getBrowserLang() !== undefined) {
    this.translateService.use(this.translateService.getBrowserLang());
  } else {
    this.translateService.use(zh);
  }
}

然后在constructor里调用这个方法

this.initTranslate();

就可以用了

 

Angular2 Ionic2 学习记录

原文:http://www.cnblogs.com/shamoyuu/p/angular2_ionic2.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!