[译]用于企业应用程序的Angular2和WebApi(SPA)-第4部分-多语言(i18n)

By robot-v1.0

本文链接 https://www.kyfws.com/applications/angular-webapi-spa-for-enterprise-app-part-multi-zh/

01月01日, 0001 - 7 分钟阅读 - 3140 个词 阅读量 0

[译]用于企业应用程序的Angular2和WebApi(SPA)-第4部分-多语言(i18n)

原文地址：https://www.codeproject.com/Articles/1147486/Angular-WebApi-SPA-for-Enterprise-App-Part-Multi

原文作者：tranthanhtu.vn

译文由本站 robot-v1.0 翻译

前言

In this article, we will see how to use multi-languages(i18n) in angular2

在本文中,我们将看到如何在angular2中使用多语言(i18n)

从Github下载源代码(Download source code from Github)

系列中的其他文章(Other Articles in the Series)

介绍(Introduction)

我环顾了互联网.其他一些人已经为Angular2中的多语言贡献了他们的解决方案.(I have looked around the internet. Some others have already contributed their solution for multi-languages in Angular2.)

看我的代码.对于这种情况,我还有另一种解决方案,在ts代码或html文件中使用起来都更容易.(Look at my code. I have another solution for this case, it looks easier to use on both ts code or from html file.)

如何获取代码(How to Get the Code)

请在以下位置检查代码(Please check out the code at) https://github.com/techcoaching/TinyERP(https://github.com/techcoaching/TinyERP) .(.)

如何使用代码(How to Use the Code)

看着 “(Look at “)/app/modules/security/role/addRole.html(/app/modules/security/role/addRole.html)",我们看到以下HTML:(”, we see the following HTML:)

<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.addOrUpdateRole.validation.nameIsRequire',
                'security.addOrUpdateRole.validation.keyAlreadyExisted']"

                [(model)]=model.name>
            </form-text-input>
            <form-textarea [placeHolderText]=i18n.security.addOrUpdateRole.inputDesc 

            [labelText]=i18n.security.addOrUpdateRole.desc [(model)]=model.description>
            </form-textarea>

            <form-permission-select [(values)]=model.permissions 

            [placeHolderText]=i18n.security.addOrUpdateRole.inputPermissions 

            [labelText]=i18n.security.addOrUpdateRole.permission

                [(model)]=model.permissions>
            </form-permission-select>

            <form-footer>
                <button id="save" 

                (click)="onSaveClicked($event)" type="button" 

                 class="btn btn-primary">{{i18n.common.form.save}}</button>
                <button id="cancel" 

                (click)="onCancelClicked($event)" type="button" 

                 class="btn btn-default">{{i18n.common.form.cancel}}</button>
            </form-footer>
        </form-default>
    </page-content>
</page>

在此HTML中,我们使用区域设置文件中的一些文本,例如:(In this HTML, we use some texts from locale file, such as:) i18n.security.addOrUpdateRole.inputName ,(,) i18n.security.addOrUpdateRole.name ,…(, …)

这些文本有一个约定,它们的格式为:(There is a convention for those texts, they are in format:) i18n.<moduleName>.<name of page>.<name of field> .(.)例如, “(For example, “) i18n.security.addOrUpdateRole.name “,我们知道这是”(”, we understand that this is the text for name field on) addOrUpdateRole 安全模块中的页面.(page in security module.)

为了更好地了解(For a better understanding about) moduleName ,请参阅(, see) 用于企业应用程序的Angular2和WebApi(SPA)-第3部分-项目结构(Angular2 & WebApi(SPA) for Enterprise App - Part 3 - Project Structure) .(.)

这些值位于”(The value for those was located in “)/app/ressources/locales/(/app/resosurces/locales/).<语言>(.).json(.json)”, 例如(”, for example)**security.en.json(security.en.json)**将包含在中使用的所有文本(will contain all text that was used in)安全(security)模块中(module in)英语(English)语言.(language.)

有关更多信息,我是如何实现的,请查看"(For more information, how did I implement this, please have a look at “)/app/models/ui/baseComponent.ts(/app/models/ui/baseComponent.ts)"(用于(” (for) i18nHelper 和(and) i18n 属性).(properties).)