Angular4项目中添加i18n国际化插件ngx-translate的步骤详解


Posted in Javascript onJuly 02, 2017

前言

本文将介绍在 Angular4 项目中配置 ngx-translate i18n 国际化组件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:

npm 安装 ngx-translate 模块

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save

在 Angular 项目配置

app.module.ts

添加

import { TranslateLoader, TranslateModule} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

 imports: [
 TranslateModule.forRoot({
 loader: {
 provide: TranslateLoader,
 useFactory: (createTranslateHttpLoader),
 deps: [Http]
 }
 })
 ]

结果如下:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { TranslateLoader, TranslateModule} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppComponent } from './app.component';

export function createTranslateHttpLoader(http: Http) {
 return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 HttpModule,
 TranslateModule.forRoot({
 loader: {
 provide: TranslateLoader,
 useFactory: (createTranslateHttpLoader),
 deps: [Http]
 }
 })
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

添加

import { TranslateService } from "@ngx-translate/core";

 constructor(public translateService: TranslateService) {

 }
 
 ngOnInit() {
 // --- set i18n begin ---
 this.translateService.addLangs(["zh", "en"]);
 this.translateService.setDefaultLang("zh");
 const browserLang = this.translateService.getBrowserLang();
 this.translateService.use(browserLang.match(/zh|en/) ? browserLang : 'zh');
 // --- set i18n end ---
 }

结果如下:

import { Component } from '@angular/core';
import { TranslateService } from "@ngx-translate/core";

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';

 constructor(public translateService: TranslateService) {

 }

 ngOnInit() {
 // --- set i18n begin ---
 this.translateService.addLangs(["zh", "en"]);
 this.translateService.setDefaultLang("zh");
 const browserLang = this.translateService.getBrowserLang();
 this.translateService.use(browserLang.match(/zh|en/) ? browserLang : 'zh');
 // --- set i18n end ---
 }
}

添加多语言文件

在 src/app/assets/ 下创建 i18n 文件夹,并在文件夹内创建 en.json 和 zh.json 文件

Angular4项目中添加i18n国际化插件ngx-translate的步骤详解

测试

app.component.html

添加代码:

<div>
 <span> test the i18n module: ngx-translate</span>
 <h1>{{ 'hello' | translate }}</h1>
</div>

在 en.json 和 zh.json 文件中添加配置

en.json

{
 "hello": "the word is hello"
}

zh.json

{
 "hello": "你好"
}

测试结果

在中文下

Angular4项目中添加i18n国际化插件ngx-translate的步骤详解

在英文下

Angular4项目中添加i18n国际化插件ngx-translate的步骤详解

示例代码

Github地址:angular + ngx-translate

本地下载地址:http://xiazai.3water.com/201707/yuanma/james-blog-ui(3water.com).rar

参考文章

ngx-translate core

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 Javascript
React学习笔记之事件处理(二)
Jul 02 #Javascript
React学习笔记之条件渲染(一)
Jul 02 #Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 #Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 #Javascript
关于使用axios的一些心得技巧分享
Jul 02 #Javascript
React服务端渲染(总结)
Jul 01 #Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 #Javascript
You might like
随机广告显示(PHP函数)
2006/10/09 PHP
下载文件的点击数回填
2006/10/09 PHP
使用 MySQL Date/Time 类型
2008/03/26 PHP
php简单提示框alert封装函数
2010/08/08 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
小学教研工作制度
2014/01/15 职场文书
社保委托书怎么写
2014/08/02 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
论文致谢词范文
2015/05/14 职场文书
神秘岛读书笔记
2015/07/01 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android