ionic2 基于ngx-translate实现多语言切换,翻译

介绍 ngx-translate 是Angular 2+的国际化(i18n)库,在github的地址是箭头 https://github.com/ngx-translate/core

将ngx-translate  使用与ionic2 项目中,实现多语言的切换。

1.安装ng2-translate

在命令提示符中进入到项目目录下,输入以下 回车。

npm install ng2-translate --save

2.导入TranslateModule

首先导入TranslateModule

在app.module.ts 下添加以下代码

import { HttpModule, Http } from ‘@angular/http‘;
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from ‘ng2-translate‘;

export function createTranslateLoader(http: Http) {
  return new TranslateStaticLoader(http, ‘./assets/i18n‘, ‘.json‘);
}

@NgModule({
  imports: [
    BrowserModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http]
    }),
    IonicModule.forRoot(MyApp)
  ]
})

圈起来的就是添加的代码

3.添加语言包

在src/assets 下新建文件夹i18n,在i18n文件夹下添加 en.json ,tw.json,zh.json 这三个json文件。

并添加内容

en.json

{
  "HOME": {
   "TITLE":"Home",
   "CONTENT":"Hello word!"
  }
}

tw.json

{
  "HOME": {
   "TITLE":"首頁",
   "CONTENT":"你好,世界!"
  }
}

zh.json

{
  "HOME": {
   "TITLE":"首页",
   "CONTENT":"你好,世界!"
  }
}

3.用法

打开文件app.component.ts,添加代码

 translate.setDefaultLang(‘en‘); // 设置默认的语言包

并导入

import { TranslateService } from ‘ng2-translate‘;

在页面里,这样使用

home.html

<ion-header>
  <ion-navbar>
    <ion-title>{{ ‘HOME.TITLE‘ | translate }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
   <button (click)="ChangeLanguage()" ion-button color="light">设置语言</button>
  <h2>{{ ‘HOME.CONTENT‘ | translate }}</h2>
</ion-content>

home.ts

import { Component } from ‘@angular/core‘;
import { NavController, AlertController } from ‘ionic-angular‘;
import { TranslateService } from ‘ng2-translate‘;
@Component({
  selector: ‘page-home‘,
  templateUrl: ‘home.html‘
})
export class HomePage {
  RadioOpen: boolean;
  RadioResult;
  langs: [{}];
  constructor(public navCtrl: NavController, public alerCtrl: AlertController, public translate: TranslateService) {

  }

  ChangeLanguage() {
    this.langs = [{ language: "English", type: "en" }, { language: "简体中文", type: "zh" }, { language: "繁体中文", type: "tw" }]

    let alert = this.alerCtrl.create();
    alert.setTitle(‘语言选择‘);
    for (let lang of this.langs) {
      alert.addInput({
        type: ‘radio‘,
        label: lang["language"],
        value: lang["type"],
        checked: (lang["type"] == this.translate.getDefaultLang() ? true : false)
      });
    }
    alert.addButton(‘取消‘);
    alert.addButton({
      text: ‘确认‘,
      handler: data => {
        this.RadioOpen = false;
        this.RadioResult = data;
        this.translate.setDefaultLang(data);
        this.translate.use(data);
      }
    });

    alert.present().then(() => {
      this.RadioOpen = true;
    });
  }

}

结果:

时间: 2024-11-13 10:27:43

ionic2 基于ngx-translate实现多语言切换,翻译的相关文章

网站多语言切换插件

很多时候,可能我们web项目中需要的只是机械式的翻译,并不需要什么利用xml或者js json等等实现逼真翻译,那样工作量太大.这时候可能你就需要这几款小工具来帮助你.当然,如果对翻译或者你的项目外国用户非常多的话,还是介绍自己动手做语言切换,毕竟工具翻译是机械翻译 下面可以选择其中的一种放在你的网站进行多语言切换 1.谷歌翻译: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xh

在使用Qt5.8完成程序动态语言切换时遇到的问题

因为之前了解过一些Qt国际化的东西,所以在写程序的时候需要显示给用户的字符都使用了 tr(" ")的形式,然后使用 Qt Linguist得到相应的 qm(Qt message)文件,再通过网上介绍的方式,在 main函数中使用 installTranslator,即可让程序在启动时自动判断语言环境,加载相应语言. 至此,静态语言切换已经完成,下面要做的是动态切换(即不需要重启软件). 1.首先,令语言能够切换的 GUI组件用的是 QComboBox,信号是 currentIndexC

Android 应用内多语言切换

p.p1 { margin: 0.0px 0.0px 12.0px 0.0px; line-height: 18.0px; font: 12.0px ".PingFang SC"; color: #000000 } p.p3 { margin: 0.0px 0.0px 13.9px 0.0px; line-height: 18.0px; font: 16.8px "PT Sans"; color: #000000 } p.p4 { margin: 0.0px 0.0

Android应用语言切换功能

因为公司的产品大部分是销售到国外的,所以领导要求app有语言切换功能.我在网上搜了些相关知识并实现了功能,在这里做个中英文切换的demo记录下来. 先看看demo的效果: 效果就是这样子.当然也可以做成其他语言的切换,具体根据需求而定. 原理其实很简单,就是多个strings.xml进行切换然后在刷新Activity. 首先,在AndroidManifest.xml文件中的每个需要切换语言的Activity中加入android:configChanges="locale". 然后在re

android 语言切换过程分析 (zhuan)

最近在看一个bug,系统切换语言后,本来退到后台的音乐,会在通知栏上显示通知.为了解决这个bug,我学习了下android的语言切换流程,也参考了大量其他人的资料.(主要参考了http://blog.csdn.net/wqhjfree/article/details/8244520)在这里我将自己的探索记录下来,作为自己的学习记录,也希望能对有同样需要的人有个帮助.刚学android不久,如果中间有什么问题不对的请多多谅解,并指出错误,多交流,共同进步下. 1.从setting入手,我们可以知道

【Android 多语言切换简单实例分享】

一.Android多语言切换 Android应用的开发不可能只针对某一个国家或者区域使用,各国间语言文化各不相同,因此一个优秀的APP必须支持多种语言,为了实现这个特性,Android给出了一个解决方式,在res目录下通过values+语言编码来实现多国语言的支持(中间采用连字符号-连接),例如:values-es代表英文,如果你决定了你的应用要支持多国语言,那么你就必须新建多种values-XXX的多语言支持文件,下面通过一个例子来看看基本的使用方式,先看下效果图: 1.工程结构 注:主要看下

Android应用内语言切换实现

自定义控件系列结束了,打个回马枪,补上前段时间埋下的一个坑---"应用内语言切换".APP语言改变是一个Configuration,但是这个Configuration和android手机屏幕旋转有点不大一样.屏幕旋转的时候,会destroy当前页面,并进行重新绘制.而切换语言后不会重新绘制页面,所以这种情况的出现造成了网上的一知半解小伙伴们哀声一片,不是在咒骂api的坑爹,就是在卖力的另辟蹊径想尽办法解决问题.思路都是很好的,目的也是坚决的,可是方向是错误的,把哥哥我也给带进了坑了,爬

android实现多语言切换

在安卓开发中,常会遇到需要切换不同语言的情况.语言不同意味着需要进行不同语种字符的动态切换.不同布局的动态切换. 安卓实现这一功能非常的简单: 首先在res中创建其它语种对应的value.layout等文件夹,比如添加英文版和越南版,命名如value-en-US.value-vi.layout-en-US.layout-vi. 命名规则在网上可以查到,value-en-US中,en表示英文,US表示美国.国家可不写.越南版可全写为layout-vi-VN. 如此,便有了几套同名,同id,但内容属

语言切换

ECSHOP商城模板实现英文繁体简体多语言切换 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2013-11-17 各位ECSHOP网店系统用户大家好,欢迎来到ECSHOP教程网图文教程,今天为大家详细解说一下ECSHOP模板实现英文繁体简体多语言切换 ECSHOP教程网ECSHOP视频教程也再不断的完善与跟进,期待大家的关注!希望在ECSHOP的道路上,ecshop教程网与您一路同行! 1).首先打开 includds/init.php  文件,找到 requi