angular项目国际化配置(ngx-translate)
原文
https://www.jianshu.com/p/7d1da3098625
大纲
1、认识ngx-translate
2、ngx-translate的配置步骤
3、ngx-translate的使用方式
4、ngx-translate的使用注意方式
认识ngx-translate
ngx-translate的官网解释是:The internationalization (i18n) library for Angular,即ngx-translate是一个用于angular项目的国际化库。简单的说,ngx-translate是angular项目的国际化功能而提供的依赖库。
ngx-translate官网有对该插件的配置和使用方法的说明,如果有兴趣精深的读者可以去看看源码,以下是我对ngx-translate使用的经验。ngx-translate
ngx-translate的配置步骤
1、下载ngx-translate的依赖库
//利用npm来安装ngx-translate依赖
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save
2、引入TranslateModule模块
2.1、在项目根模块中导入支持的包
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
2.2 、在项目根模块中配置ngx-translate
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Http } from '@angular/http';
import {
TranslateModule,
TranslateLoader,
TranslateService
} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';
import {HttpClient, HttpClientModule} from '@angular/common/http';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient]
}
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
3、注入TranslateService 服务
3.1、在需要用到的component里面注入TranslateService
import {TranslateService} from '@ngx-translate/core';
3.2、通过服务设置当前应用的语言
constructor(
private translate: TranslateService
){
this.translate.use('en');
}
4、创建国际化文件
根据根模块的配置,我们应该在assets文件中再创建一个文件夹i18n,然后在i18n的文件夹下创建国际化文件,可以是en.json(英文)、zh_cn.json(中文)、zh_tw.json(中国台湾),this.translate.use('en')用的就是en.json翻译文件,如果要使用其他两个翻译文件就是this.translate.use('zh_cn')、this.translate.use('zh_tw')
//en.json {
"welcome":"welcome to this app",
"getName":"hello I am {{name}}"
}
//zh_cn.json {
"welcome":"欢迎使用本应用",
"getName":"你好,我是{{name}}"
}
5、使用国际化
5.1、使用管道来翻译输入信息
<span>{{ 'welcome '| translate}}</span>
5.2、使用指令来翻译指定信息
<span [translate]="'welcome'">welcome</span>
5.3、使用服务翻译指定信息
this.translate.get('welcome').subscribe((res: string) => {
console.log(res);
this.welcomeTranslate = res;
});
5.4、对带参数的信息进行翻译
5.4.1、翻译管道中带参数
<span>{{getName | translate: {name:"crk"} }}</span>
5.4.2、翻译指令带参数
<span
[translate]="getName"
[translateParams]="{'name':'ggg'}">
getName
</span>
5.4.3、翻译服务带参数
this.translate.get('getName',this.param).subscribe((res: string) => {
console.log(res);
this.getNameTranslate = res;
});
需要注意
也许你根据我的教程走到这步,运行项目的时候会发现并没有如愿以偿的达到效果,那么是我的教程有问题吗?并不是的,因为以上的步骤都是作者一步一步的操作过的,也许你根据网上的绝大部分的教程安装配置都得不到理想的效果,如果达到了效果,那么只能说你的运气不错。
为什么这么说呢?并不是作者为自己的博客无法满足读者的需求而找到的借口。之所以会出现这样的原因是因为安装的时候项目的环境可能有些问题。
下面是一种ngx-translate官网给出的相应的依赖库对应的angular版本。
作者我本人的angular的版本是angular5,因此完整准确的下载依赖库的代码应该是如下所示:
//完整的npm下载依赖库代码
npm install @ngx-translate/core@8.x --save
npm install @ngx-translate/http-loader@1.x --save
就我根据源码看到的7.x的方式是依赖于@angular/http库中的http对象,但是8.x以及之后的却是依赖于HttpClinet的依赖库实现的,因此有时候版本对不上总是会出现一些奇奇怪怪的错误,那么这时候就要检查一下是因为代码的原因或者有可能是因为版本不对的问题。
综上
以上就是我对angular项目国际化配置(ngx-translate)的使用和理解,也许读者自己做配置的时候没有解决思路的时候会很着急,会很无奈。当这是自己探索angular框架时有遇到的,就像我遇到版本的问题的时候也是查找了很久,最后查到了官网看了源码才发现了问题,最后解决问题的时候自己还是有点小满足的。每一次问题的解决都是对我们自我的提升,哪怕也许最后没有解决,我们也都曾努力过不是吗。
这里提供一下我实践的代码:angular实例中的angular-translate
angular项目国际化配置(ngx-translate)的更多相关文章
- AngularJS国际化配置
AngularJS国际化配置 下载angular-translate 下载zip包:https://github.com/angular-translate/bower-angular-transla ...
- .NET Core +Angular 项目 部署到CentOS
前言: 最近公司需要开发项目能在Linux系统上运行,示例开发项目采用.Net Core + Angular开发:理论上完全支持跨平台. 但是实践才是检验真理的唯一标准:那么还是动手来验证实现下:过程 ...
- springmvc国际化 基于请求的国际化配置
springmvc国际化 基于请求的国际化配置 基于请求的国际化配置是指,在当前请求内,国际化配置生效,否则自动以浏览器为主. 项目结构图: 说明:properties文件中为国际化资源文件.格式相关 ...
- springmvc国际化 基于浏览器语言的国际化配置
当前标签: springmvc springmvc国际化 基于浏览器语言的国际化配置 苏若年 2013-10-09 13:03 阅读:305 评论:0 SpringMVC中应用Ajax异步通讯 ...
- 把angular项目整合到.net mvc中
之前的开发选择的是完全舍弃服务端,仅保留最简单web服务器提供angular经打包的静态资源,此外所有的业务与数据请求都访问一个分离的WebApi来实现.不过最近碰到一个需求,有必要使用多个客户端,而 ...
- springMVC项目国际化(i18n)实现方法
SpringMVC项目国际化(i18n)实现方法 按照作息规律,每周五晚必须是分享知识的时间\(^o^)/~,这周讲点儿啥呢,项目需要逼格,咱们国际化吧(* ̄rǒ ̄)~,项目中碰到这类需求的童鞋可能并 ...
- 个人从源码理解angular项目在JIT模式下的启动过程
通常一个angular项目会有一个个模块(Module)来管理各自的业务,并且必须有一个根模块(AppModule)作为应用的入口模块,整个应用都围绕AppModule展开.可以这么说,AppModu ...
- Angular20 nginx安装,angular项目部署
1 nginx安装(Windows版本) 1.1 下载安装包 到官网下载Windows版本的nginx安装包 技巧01:下载好的压缩包解压即可,无需安装 1.2 启动nginx 进入到解压目录,点击 ...
- Angular4--提速--提升Angular项目的首页打开速度(包含微信登录优化)
Angular项目的首页打开速度很慢,有时候会有几秒的加载时间.如果在手机端访问的话,怕是要等待十多秒,这对用户体验很差.下面参考http://www.cnblogs.com/feiyu159/p/8 ...
随机推荐
- IOS越狱开发错误解决
Questions: haseScriptExecution Run\ Script /Users/jun/Library/Developer/Xcode/DerivedData/ButtonMa ...
- mac下的词典翻译快捷键
mac下的词典翻译快捷键:cmd+ctl+d;很方便
- Button- 自定义控件添加自定义属性
今天自定义了一个button按钮,需要添加一个属性,具体步骤如下 1.新属性的信息设定:在values目录下添加attrs.xml文件,在里面添加属性信息 <?xml version=" ...
- c++运算符重载笔记
运算符重载的概念:给原有的运算符赋予新的功能: 比如:+ 不仅可以做算术运算也可以连接俩个字符串 一元运算符:只与一个操作数进行运算 比如 正负号 运算符重载的本质是:函数重载. <<与& ...
- 78.pipe多管道云端,客户端通信
压力测试截图: 云端 定义管道缓存区大小,最多连接数量(线程个数),当前线程个数,管道名字 //缓冲区大小 #define SIZE 4096 //最多连接数量 #define MAX_CONNECT ...
- asp.net Code学习二(使用vs 2015 update 3)
1.在vs 2015上搭建asp.net core: 安装 .Net core sdk.vs2015 tool 即可使用vs 2015开发asp.net core. 2.Net core中国学习小组 ...
- Oracle 12C R2 on Linux 7.X Data Guard 搭建文档
1.查看主机和数据库信息 [oracle@oracle1 ~]$ sqlplus / as sysdba SQL*Plus: Release 12.2.0.1.0 Production on ...
- GO语言学习(十二)Go 语言函数
Go 语言函数 函数是基本的代码块,用于执行一个任务. Go 语言最少有个 main() 函数. 你可以通过函数来划分不同功能,逻辑上每个函数执行的是指定的任务. 函数声明告诉了编译器函数的名称,返回 ...
- 00099_commons-IO
1.导入classpath (1)加入classpath的第三方jar包内的class文件才能在项目中使用: (2)创建lib文件夹: (3)将commons-io.jar拷贝到lib文件夹: (4) ...
- POJ 1166 The Clocks 高斯消元 + exgcd(纯属瞎搞)
依据题意可构造出方程组.方程组的每一个方程格式均为:C1*x1 + C2*x2 + ...... + C9*x9 = sum + 4*ki; 高斯消元构造上三角矩阵,以最后一个一行为例: C*x9 = ...