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 相关文章推荐
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
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 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
php生成短域名函数
2015/03/23 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python pickle模块用法实例分析
2015/05/27 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
Python函数式编程实例详解
2020/01/17 Python
Python类中self参数用法详解
2020/02/13 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
2014自主招生自荐信策略
2014/01/27 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
科学发展观活动总结
2014/08/28 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
2014年基建工作总结
2014/12/12 职场文书
委托公证书格式
2015/01/26 职场文书