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

Source: Internet
Author: User
Tags i18n

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

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.