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

最后

以上就是感动荷花为你收集整理的使用Angular2及WebApi开发SPA类型的企业应用 - Part 4- 多语言的全部内容，希望文章能够帮你解决使用Angular2及WebApi开发SPA类型的企业应用 - Part 4- 多语言所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。