Ionic2-based Ngx-translate for multi-language switching, translation

Source: Internet
Author: User
Tags export class i18n

Introduction Ngx-translate is Angular's international (i18n) library, and the address on GitHub is the arrow https://github.com/ngx-translate/core

Use the ngx-translate with the IONIC2 project to implement multi-language switching.

1. Installing Ng2-translate

At the command prompt, enter the following carriage return under project directory.

NPM Install Ng2-translate--save

2. Import Translatemodule

First Import Translatemodule

Add the following code under 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)  ]})

Circled is the added code.

3. Add a Language pack

Under Src/assets, create a new folder i18n, add En.json under the i18n folder, and Tw.json,zh.json the three JSON files.

and add content

En.json

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

Tw.json

{"  HOME": {   "TITLE": "homepage",   "CONTENT": Hello, world! "  }}

Zh.json

{"  home": {   "TITLE": "Home",   "CONTENT": Hello, world! "  }}
3. Usage

Open file App.component.ts, add code

Set the default language pack

and import

Import {Translateservice} from ' Ng2-translate ';

In the page, this uses

Home.html

<Ion-header>  <Ion-navbar>    <Ion-title>{' HOME '. TITLE ' | Translate}}</Ion-title>  </Ion-navbar></Ion-header><ion-contentpadding>   <Button(click)= "Changelanguage ()"Ion-button Color= "Light">Set Language</Button>  <H2>{' HOME '. CONTENT ' | Translate}}</H2></ion-content>

Home.ts

Import {Component} from ' @angular/core '; import {navcontroller, alertcontroller} from ' ionic-angular '; import {Translat EService} from ' Ng2-translate '; @Component ({selector: ' Page-home ', Templateurl: ' home.html '}) Export class Homepage {R  Adioopen:boolean;  Radioresult;  Langs: [{}]; Constructor (public navctrl:navcontroller, public alerctrl:alertcontroller, public translate:translateservice) {} Cha Ngelanguage () {this.langs = [{language: "中文版", type: "en"}, {language: "Chinese Simplified", type: "zh"}, {language: "Traditional Chinese"    , type: "TW"}] let alert = this.alerCtrl.create ();    Alert.settitle (' language selection '); For (Let Lang of This.langs) {alert.addinput ({type: ' Radio ', label:lang["language"], value:l    ang["type"], checked: (lang["type"] = = This.translate.getDefaultLang ()? true:false)});    } Alert.addbutton (' Cancel '); Alert.addbutton ({text: ' confirm ', Handler:data = = {this.        Radioopen = false; This. Radioresult = dAta        This.translate.setDefaultLang (data);      This.translate.use (data);    }    }); Alert.present (). then (() = {this.    Radioopen = true;  }); }}

Results:

Ionic2-based Ngx-translate for multi-language switching, translation

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.