使用Angular2及WebApi开发SPA类型的企业应用 - Part 4- 多语言

使用Angular2及RESTful WebApi开发SPA类型的企业应用 - Part 4 多语言
作者：techcoaching，翻译：飘落寒冰
原文 有道
注：第一次翻译文章，有错译之处还请多多包涵，欢迎指出以便改进。

本文将介绍在angular2中如何使用多语言（i18n）
从Github上下载源码

该系列的全部文章

1. 概览
2. 添加新角色
3. 项目结构
4. 多语言
5. 依赖注入和控制反转-为什么和为什么不?
6. RESTful & WebApi
7. 应用生命周期管理
8. 应用构建与部署

简介

通过检索，我发现对于如何在angular2中使用多语言，网上已经有人贡献过他们的解决方案。

我的方案与之不同，无论是从ts代码还是html文件，我的方案都更简便一些。

如何使用代码

请看”/app/modules/security/role/addRole.html”，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>

在此文件中，我们使用了一些在本地化文件中的Key, 如：i18n.security.addOrUpdateRole.inputName，i18n.security.addOrUpdateRole.name, 等

这些Key一般采用如下格式： i18n.... 例如：”i18n.security.addOrUpdateRole.name”, 它代表security模块下addOrUpdateRole组件下name字段对应显示的文字信息。

可以参考项目结构疑问来理解模块名称。

“/app/resosurces/locales/..json”文件中存放着Key对应的Value，如security.en.json包含security模块用到的所有的英文Value。

想要详细了解我是如何实现该功能，请参阅”/app/models/ui/baseComponent.ts” (i18nHelper及i18n properties)。

授权

本文，以及所包含的源码，文件遵循CPOL协议