angular8.x + ngx-translate实现国际化
本文将介绍ngx-translate在angular8.x中的使用,主要内容有ngx-translate的安装、前端json翻译模板的配置以及如何改造为请求后台获取翻译模板json。完成后整体应用文件目录结构如下:
|- src
|- |- app
|- |- |- app.component.css
|- |- |- app.component.html
|- |- |- app.component.ts
|- |- |- app.module.ts
|- |- assetss
|- |- |- i18n
|- |- |- |- en.json
|- |- |- |- zh.json
|- |- index.html
|- |- mian.ts
|- |- polyfills.ts
|- |- style.css
|- angular.json
|- package.json
一、安装
在安装之前需要确认自己使用的angular的版本,不同的版本的angular可能对应不同的ngx-translate的版本。本文使用的angular版本为8.0.0。安装版本说明如下:
Angular | @ngx-translate/core | @ngx-translate/http-loader |
---|---|---|
7/8 | 11.x+ | 4.x+ |
6 | 10.x | 3.x |
5 | 8.x to 9.x | 1.x to 2.x |
4.3 | 7.x or less | 1.x to 2.x |
2 to 4.2.x | 7.x or less | 0.x |
此表格来源于ngx-translate官网,时间2019-12-1 11:16:28。
确认版本之后可以输入如下命令安装:
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save
如需要指定特定的版本可以参考如下命令:
npm install @ngx-translate/core@11.x --save
二、使用前端json翻译模板
1. 导入TranslateModule
要想在angular中使用ngx-translate
,则必须将其在应用程序的根@NgModule
中使用TranslateModule.forRoot()
导入,forRoot
静态方法是同时提供和配置服务的约定。确保只在应用程序的根模块中调用此方法,大多数情况下调用AppModule
。如果需要在其他的module
中使用,则需要在其他的module
中使用imports: [..., TranslateModule]
,和exports:[..., TranslateModule]
。
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core';@NgModule({imports: [BrowserModule,TranslateModule.forRoot()],bootstrap: [AppComponent]
})
export class AppModule { }
2. 使用AoT
如果想要在使用AoT
编译的同时配置自定义的translateLoader
,那么这边的函数必须使用export
修饰,即必须使用导出函数而不是内联函数。现在AppModule
中代码需要改造为如下:
// 包的导入省略......
// AoT
export function createTranslateLoader(http: HttpClient) {return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({// import中必须导入HttpClientModule,否则会报错'NullInjectorError: No provider for HttpClient!'imports:[ BrowserModule, FormsModule, HttpClientModule,TranslateModule.forRoot({loader: {provide: TranslateLoader,useFactory: (createTranslateLoader),deps: [HttpClient]}})],declarations: [ AppComponent ],bootstrap: [ AppComponent ]
})
export class AppModule { }
这边的loader中的provide代表将TranslateLoader
注入进来,而他的实现是由useFactory
的createTranslateLoader
来具体实现。
3. 配置json翻译模板
在2中可以看到new TranslateHttpLoader(http, './assets/i18n/', '.json')
时已经指定了翻译模板的存放路径,所以现在需要在assets
默认静态文件的存放目录下新建名为i18n
的文件夹,并在其下新建zh.json
和en.json
翻译模板文件,如下:
// en.json
// 注意:json文件中不要写注释!!!否则会报错
{"i18ntest":"Test Project For i18n","hello": "Hello World !","author":"author: {{value}}","language":"language","header": {"author": "Default.W"}
}
// zh.jsons
{"hello": "你好, 世界!","i18ntest":"测试项目(i18n)","author":"作者: {{value}}","language":"语言","header": {"author": "Default.W"}
}
4. 使用
在AppComponent中使用,需要先将TranslateService
导入进来,并且在构造函数处注入:
constructor(public translateService: TranslateService) {this.translateService.setDefaultLang('zh'); // 设置当前的默认语言类型this.translateService.use('zh'); // 设置使用的语言类型
}
现在就可以在html中使用管道进行翻译了:
<h1>{{'i18ntest' | translate}}</h1>
<p>{{'hello' | translate}}</p>
翻译还支持传值的翻译方式,html文件中的param
为AppComponent中定义的变量:
// AppComponent
public param;
ngOnInit() {this.param = {value: 'Default.W'};
}
<!-- app.component.html -->
<p>{{"author" | translate:param}}</p>
三、从后台请求需要的翻译模板
如果不想在前台配置翻译模板的json文件,我们还可以在后端自行添加properties文件,并且不要自己写好一个后台接口来请求这个配置文件并组装成为json文件返回。在前端我们只需要将translate.loader.ts
的中的TranslateLoader
实现,并在实现中请求后端写好的接口就可以切换为后台的json。
// 需要重新实现这个方法来请求后端接口
export abstract class TranslateLoader {abstract getTranslation(lang: string): Observable<any>;
}
实现代码示例:
export class TranslateHttpLoader implements TranslateLoader {/*** Get the translate from the service*/public getTranslation(lang: string): Observable<Object> {Subject subject = new Subject<any>();this.http.post(url).subscribe({next: res => {subject.next(res);},error: err => {console.log('获取失败');}});return subject;}
}
四、最终结果
1. 英文:
2. 中文
3. 完整代码
完整代码请查看github。
五、参考文献
[1] ngx-translate官方Github
angular8.x + ngx-translate实现国际化相关推荐
- 01、pyqt入门使用--01布局、基本组件、第一个示例、qtdesigner大概使用
01.本系列使用pyqt5作为教材创建项目 --安装 pyqt5 和 pyqt5-tools[这个就是为了使用qtdesigner这个工具] 两个包 --进入Lib\site-packages ...
- Angular-translate笔记
Angular-translate笔记 在已经保证 translate 功能 (国际化) 可以使用的前提下,翻译可以有两种写法,分别是在HTML中和TS中完成翻译. 在HTML中使用 管道 ( | ) ...
- 利用angular结合translate为项目实现国际化
前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎 ...
- ngx-translate实现国际化:this.translate.use()、this.translate.get()、this.translate.instant()、onLangChange
Angular ngx-translate实现国际化 准备工作 ① ngx-translate的前提配置 ② 创建国际化文件 assets -i18n ③ 注入translateService服务 使 ...
- Flask 教程 第十三章:国际化和本地化
本文转载自:https://www.jianshu.com/p/e2923f4042d6 这是Flask Mega-Tutorial系列的第十三部分,我将告诉你如何扩展Microblog应用以支持多种 ...
- AngularJS 国际化——Angular-translate
对于一个用户群面向全球的的应用来说,不得不考虑国际化的问题.当然,即便是刚刚起步的小应用,如果有心搞大,也应该提前设计国际化的方案. 本篇讲述使用AngularJS构建的应用的简单国际化方案,准确的说 ...
- 国际化困境(第一篇)
(和我前一篇文章一样,这篇文章也需要读者动手写些程序,参与其中,实验过程可能需要反复重启电脑,另外最好准备一套英文Windows系统,哦,如果再有一套Windows Vista英文版,那再好不过,总之 ...
- golang国际化站点
管理多个本地包 在开发一个应用的时候,首先我们要决定是只支持一种语言,还是多种语言,如果要支持多种语言,我们则需要制定一个组织结构,以方便将来更多语言的添加.在此我们设计如下:Locale有关的文件放 ...
- Ionic+Angular实现中英国际化(附代码下载)
场景 Ionic介绍以及搭建环境.新建和运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166 在上面搭建起 ...
- QT学习:多国语言国际化
一.国际化支持的实现 (1)使用QString对象表示所有用户可见的文本.由于QString内部使用Unicode编码实现,所以它可以用于表示所有需要向用户呈现的文本.当然,对于仅程序员可见的文本并不 ...
最新文章
- 1-2 postman工具简介
- 类的成员和嵌套(建模)
- Java Scoket之java.io.EOFException解决方案
- IIS配置不正确可能导致“远程服务器返回错误: (404) 未找到错误一例。
- UA MATH564 概率论 计算至少有一个发生的概率:容斥原理与庞加莱公式
- base64编解码的类
- 使用VS Code 开发.NET CORE 程序指南
- HuggingFace学习3:加载预训练模型完成机器翻译(中译英)任务
- python简单的爬虫程序代码_简单的电子邮件爬虫Python代码
- jquery trigger
- 如何修改手机IP地址
- Aircrack-ng破解WEP
- keil出现蓝色小箭头
- 网站被劫持的解决方案、网站被劫持怎么办、网站被劫持有什么解决办法
- tomcat修改配置文件ip为服务器真实ip
- xampp的下载安装及使用
- 【常见面试题】性能测试里,压力测试、负载测试、并发测试、强度测试、容量测试,具体是什么意思
- tools:callgraph
- LVS解决高并发,大数据量
- GetGestureInfo 函数-中文整理
热门文章
- 【Rust 笔记】08-枚举与模式
- Lua游戏客户端框架通用功能模块
- failed to solve with frontend dockerfile.v0: failed to create LLB definition: failed to copy: httpRe
- AAAI 2020对抗样本论文
- 尺度不变特征变换(SIFT算法…
- 模式先行浅析分销系统的优势
- STM32F103C8T6有128K的Flash
- 利用大智慧DDE数据生成每只股票的历史数据文件(SQLServer2005)
- R9000P电脑win10系统常用快捷键及使用技巧
- 建设银行安徽分行副行长王文兵:金融科技赋能银行数字化转型