The operating mechanism of the i18n of ANGULAR2

Preface:

Recently, due to the needs of the project, the need for in-depth study of ANGULAR2, although there has been research, but because of the lack of best practices, and then real to practice when still encounter a lot of key points. Experience to: "Consider 1000 times, better to do it once." Hesitate 10,000 times, try to practice once. ”。 In the ANGULAR2 related front-end project, there will be a i18n such a file, want to know why this file is used. Follow the small knitting to see it. Text:

i18n This file can make Web page text multilingual processing, here is to make Chinese into English, using such a mechanism, you can make Web page text internationalization display.

Take the desert poor autumn teacher's "Nicefish" project as an example, elaborated i18n in the project to play the role.

In the "Nicefish" project, there is a user login component, want to allow users to log in the four words between the English and Chinese to switch between the need for four steps: 1. To introduce a dependency package in the root component app.module.ts:

Import {translatemodule, Translateloader, translatestaticloader} from ' Ng2-translate ';

Imports: [
     translatemodule.forroot ({
      provide:translateloader,
      usefactory: (Createtranslateloader),
      deps: [Http]
    }]

2. Introduce a dependency package in the root component app.component.ts:

Import {Translateservice} from ' Ng2-translate ';

Export class Appcomponent {
  constructor () {
    console.log (' Environment config ', config);
  }
  Ngoninit () {
	    this.translate.addLangs (["en", "en"]);
		This.translate.setDefaultLang (' en ');

		Const Browserlang = This.translate.getBrowserLang ();
		Console.log ("Browser language detected >" + Browserlang);
		This.translate.use (Browserlang.match (/zh|en/)? Browserlang: ' zh ');
  }

3. Modify user-login.component.html:

 

Modify the above statement to:


 
4. Modification: Assets in I18n-en.json add:

"Userlogin": {

        "userlogin": "Userlogin"

    } 
 
Modification: I18n-zh.json Additions in assets:

"Userlogin": {

       "userlogin": "User logon"

    }
 
5. Verify 
Google Browser as an example: Enter the "Nicefish" Web site: http://localhost:4200

Google browser to modify the language URL: http://jingyan.baidu.com/album/f25ef25417f1eb482d1b827c.html?picindex=3

At this time "nicefish" page display before and after changes to:

Before setting:



After setting:




PostScript:

For the study of Angular2, "The road is long, I will go up and down and explore."