《Angular2之i18n运行机制》
前言: 最近由于项目需要,需要对于angular2进行深入研究,之前虽有所研究,但由于缺乏最佳实践,继而真正到实践的时候还是遇到很多关键点。切身体会到:“考虑一千次,不如去做一次!犹豫一万次,不如实践一次!”。在angular2相关的前端项目里面,会出现i18n这样的一个文件,想知道这个文件干嘛用的吗?跟着小编一起来看看吧。 正文: i18n这个文件可以使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.修改html:
在NiceFish-app-user-userlongin文件中找到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":"用户登录"
}
后记:
对于angular2的研究“路漫漫其修远兮,吾将上下而求索”。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |