《Angular2之i18n运行机制》
来源:互联网 发布:mac中的远程光盘 编辑:程序博客网 时间:2024/06/04 17:55
前言:
最近由于项目需要,需要对于angular2进行深入研究,之前虽有所研究,但由于缺乏最佳实践,继而真正到实践的时候还是遇到很多关键点。切身体会到:“考虑一千次,不如去做一次!犹豫一万次,不如实践一次!”。在angular2相关的前端项目里面,会出现i18n这样的一个文件,想知道这个文件干嘛用的吗?跟着小编一起来看看吧。
正文:
i18n这个文件可以使web页面文字进行多语言处理,在这里就是可以使中文变成英文,运用这样的机制,可以使web页面文字国际化显示。
以大漠穷秋老师的《NiceFish》项目为例,阐述一下i18n在项目里所起到的作用。
在《NiceFish》项目里,有一个用户登录的组件,想要让用户登录这四个字在中英文之间切换,需要进行四步:
1.在根组件app.module.ts中引入依赖包:
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';
imports: [ TranslateModule.forRoot({ provide: TranslateLoader, useFactory: (createTranslateLoader), deps: [Http] })]
2.在根组件app.component.ts中引入依赖包:
import { TranslateService } from 'ng2-translate';
export class AppComponent { constructor() { console.log('Environment config', Config); } ngOnInit() { this.translate.addLangs(["zh", "en"]);this.translate.setDefaultLang('zh');const browserLang = this.translate.getBrowserLang();console.log("检测到的浏览器语言>" + browserLang);this.translate.use(browserLang.match(/zh|en/) ? browserLang : 'zh'); }}
3.修改User-login.component.html:
<h3 class="panel-title">用户登录</h3>
把上述语句修改成:
<h3class="panel-title">{{'userLogin.userLogin' |translate}}</h3>
4.修改:assets中的i18n-en.json添加:
"userLogin":{ "userLogin":"UserLogin" }
修改:assets中的i18n-zh.json添加:
"userLogin":{ "userLogin":"用户登录" }
5.验证
以谷歌浏览器为例:输入《NiceFish》网址:http://localhost:4200
谷歌浏览器修改语言网址:http://jingyan.baidu.com/album/f25ef25417f1eb482d1b827c.html?picindex=3
此时《NiceFish》页面显示前后变化为:
设置前:
设置后:
后记:
对于angular2的研究“路漫漫其修远兮,吾将上下而求索”。
0 1
- 《Angular2之i18n运行机制》
- JAVA之i18n
- 诗歌rails 之 i18n
- Struts2之I18N
- ireport开发之I18n
- rails 之 i18n
- 前端之Angular2实战:Angular2语法清单
- angular2 之 form表单
- Angular2之二级路由
- Angular2 之 单元测试
- Angular2 之 Form 表单
- Angular2 之 依赖注入
- Angular2 之 @ngrx/store
- Angular2 之 Animations
- 《Angular2之TypeScript》
- angular2之打包
- angular2之组件通讯
- Angular2之入门示例
- 总结错误
- leetcodeOJ 78. Subsets
- 多态重要知识点
- BP推导过程(摘自UFLDL)
- js获取 jquery获取页面shu
- 《Angular2之i18n运行机制》
- 设备树(待续)
- ORACLE 11g 使用ROWNUM完美解决ORA-00600:内部错误代码
- 区块链基础
- 为什么线程同步的时候pthread_cond_t要和pthread_mutex_t同时使用
- Java 异常
- win10 安装tensorflow 并测试mnist
- win10+ubuntu双系统,用refind引导
- swift系列:新手村第二周