使用Angular2及WebApi开发SPA类型的企业应用 - Part 4- 多语言
来源:互联网 发布:网络言论自由的利弊 编辑:程序博客网 时间:2024/06/05 19:31
使用Angular2及RESTful WebApi开发SPA类型的企业应用 - Part 4 多语言
作者:techcoaching,翻译:飘落寒冰
原文 有道
注:第一次翻译文章,有错译之处还请多多包涵,欢迎指出以便改进。
本文将介绍在angular2中如何使用多语言(i18n)
从Github上下载源码
该系列的全部文章
- 概览
- 添加新角色
- 项目结构
- 多语言
- 依赖注入和控制反转-为什么和为什么不?
- RESTful & WebApi
- 应用生命周期管理
- 应用构建与部署
简介
通过检索,我发现对于如何在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 6- RESTful 和 WebApi
- 使用Angular2及WebApi开发SPA类型的企业应用
- 使用Angular2及WebApi开发SPA类型的企业应用
- 使用Angular2及WebApi开发SPA类型的企业应用 - Part 2- 添加新角色
- 使用Angular2及WebApi开发SPA类型的企业应用 - Part 3 项目结构
- 使用Angular2及WebApi开发SPA类型的企业应用 - Part 5- 依赖注入和控制反转
- 使用Angular2与WebApi开发SPA类型的企业应用 - Part 1- 概览
- 使用 AngularJS 开发一个大规模的单页应用(SPA)
- 使用 AngularJS 开发一个大规模的单页应用(SPA)-接上篇
- angular中的ng路由及SPA应用
- Vue-cli开发SPA应用(适用初学者)
- 开发单页应用(SPA)时候遇到的微信支付授权目录的坑
- 开发单页应用(SPA)时候遇到的微信支付授权目录的坑
- 开发单页应用(SPA)时候遇到的微信支付授权目录的坑
- 开发单页应用(SPA)时候遇到的微信支付授权目录的坑
- spa(单页面应用)的优缺点
- SPA单页应用的优缺点
- BZOJ 1391 网络流
- 最适合初学者的 IntelliJ IDEA 教程 - HelloWorld 和相关设置
- CSS3动画样式记录
- 拆分贴图的Alpha通道 --对抗ETC1的原罪
- linux知识点
- 使用Angular2及WebApi开发SPA类型的企业应用 - Part 4- 多语言
- C语言课程设计:小学生考试系统
- 数据关联——FP-Growth算法
- 注解(Annotation)功能的学习笔记
- MFC 打开指定文件夹
- Java数据结构和算法:哈夫曼树
- springmvc web.xml详解
- Python中使用OpenCV最基本的程序
- listview checkbox edittext 的共同使用