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 05 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 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通过COM使用ADODB的简单例子
2006/12/31 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
requireJS使用指南
2016/04/27 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
python实现随机漫步方法和原理
2019/06/10 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
Pycharm安装python库的方法
2020/11/24 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
初中体育教学反思
2014/01/14 职场文书
装饰活动策划方案
2014/02/11 职场文书
法人授权委托书范本
2014/04/04 职场文书
家装电话营销开场白
2015/05/29 职场文书
一文简单了解MySQL前缀索引
2022/04/03 MySQL