使用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协议

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值