Use ANGULAR2 and WEBAPI to develop spa-type enterprise Applications-Part 4-Multilingual

Use ANGULAR2 and restful webapi to develop spa-type enterprise Applications-Part 4 MultiLanguage
Author: techcoaching, translation: Falling ice
The original
Note: The first translation of the article, the wrong translation of the place also please forgive me, welcome to point out to improve.

This article describes how to use multiple languages (i18n) in Angular2
Download source from GitHub all articles in the series Overview Add new role Project structure multiple language Dependency injection and control reversal-why and why not? Introduction to RESTful & WEBAPI Application Lifecycle Management application building and deployment

By searching, I have found that there are already people who have contributed their solutions to the use of multiple languages in ANGULAR2.

My schemes are different, and my schemes are simpler, whether from TS code or HTML files. How to use code

Please see "/app/modules/security/role/addrole.html", the HTML code is as follows

<page> <page-header> {I18n.security.addOrUpdateRole.title}} </page-header> <page -content> <form-default> <form-text-input [Placeholdertext]=i18n.security.addorupdaterole. InputName [Labeltext]=i18n.security.addorupdaterole.name [validation]=] [' Security.addorupdat
                ERole.validation.nameIsRequire ', ' security.addOrUpdateRole.validation.keyAlreadyExisted '] " [model]]=model.name> </form-text-input> <form-textarea [Placeholdertext]=i18n.securi
            Ty.addOrUpdateRole.inputDesc [LABELTEXT]=I18N.SECURITY.ADDORUPDATEROLE.DESC [model]]=model.description> </form-textarea> <form-permission-select [(values)]=model.permissions [place holdertext]=i18n.security.addorupdaterole.inputpermissions [Labeltext]=i18n.security.addorupdaterole.permissi on [(Model)]=model.permissions> </form-permission-select> <form-footer> & Lt;button id= "Save" (click) = "onsaveclicked ($event)" type= "button" class= "Btn Btn-primar Y ">{{i18n.common.form.save}}</button> <button id=" Cancel "(click) =" ONCANCELCL
            Icked ($event) "type=" button "class=" Btn Btn-default ">{{i18n.common.form.cancel}}</button> </form-footer> </form-default> </page-content> </page>

In this file, we use some key in the localized file, such as I18n.security.addorupdaterole.inputname,i18n.security.addorupdaterole.name, etc.

These keys generally use the following format: i18n .... For example: "I18n.security.addOrUpdateRole.name", which represents the text information that corresponds to the display of the Name field under the Addorupdaterole component under the security module.

You can refer to the project structure questions to understand the module name.

"/app/resosurces/locales/." The JSON file holds the value of the key, such as Security.en.json contains all the English value that the security module uses.

To learn more about how I implemented this feature, see "/app/models/ui/basecomponent.ts" (I18nhelper and i18n properties). Authorize

This article, as well as the contained source code, documents follow the CPOL protocol