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类中定义原型方法的两种实现的区别
Mar 08 Javascript
Javascript模块模式分析
May 16 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
jQuery常用选择器详解
2017/07/17 jQuery
关于vue-router的那些事儿
2018/05/23 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
在Django中使用Sitemap的方法讲解
2015/07/22 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
Flask框架配置与调试操作示例
2018/07/23 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
同学会主持词
2014/03/18 职场文书
倡导文明标语
2014/06/16 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书