angular5 基于ngx-translate实现多语言切换
angular的坑永远都是那么多,当然了,主要还是我太菜~
基于ngx-translate实现多语言切换这个功能,我又是折腾了很久,下面是我实现的过程:
1、安装ngx-translate
需要安装@ngx-translate/core和@ngx-translate/http-loader,我的问题主要出在这个,angular的版本不同,要安装对应组件的版本也不同。
可以到官网查看对应版本的说明:https://github.com/ngx-translate/core
我本地用的是angular5,使用最新的版本,会报错。。
针对angular5版本的组件安装命令是:
npm install @ngx-translate/core@9.1.1 --save npm install @ngx-translate/http-loader@2.0.1 --save
如果你用的不是angular5,可以到下面对应的changelog页面,查找对应的版本号:
https://github.com/ngx-translate/core/releases
https://github.com/ngx-translate/http-loader/releases
2、修改app.module.ts,添加对ngx-translate的支持
引入:
import { HttpClientModule,HttpClient } from '@angular/common/http';
import {TranslateModule,TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [],
bootstrap: [AppComponent]
})
3、修改app.component.ts,添加对ngx-translate的支持
引入ngx-translate:
import {TranslateService} from '@ngx-translate/core';
初始化(红色内容为添加内容):
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,public translate: TranslateService) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide(); translate.addLangs(["zh", "en"]);
translate.setDefaultLang('zh'); const browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/zh|en/) ? browserLang : 'zh');
});
4、添加语言资源文件:
添加en.json和zh.json文件,这两个文件要建在:
项目根目录-》src-》assets-》i18n目录下,我的en.json文件内容如下:
zh.json文件内容如下:
5、在html页面中可以引入资源
{{'search' | translate}}
{{'home.firstPage' | translate}}
search和home.firstPage是资源的名称
官方参考例子:https://stackblitz.com/github/ngx-translate/example
angular5 基于ngx-translate实现多语言切换的更多相关文章
- 在使用Qt5.8完成程序动态语言切换时遇到的问题
因为之前了解过一些Qt国际化的东西,所以在写程序的时候需要显示给用户的字符都使用了 tr(" ")的形式,然后使用 Qt Linguist得到相应的 qm(Qt message)文 ...
- 基于jQuery图片遮罩滑动文字切换特效
基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 动态语言切换(续)-designer中的retranslateUi(带源码)
本站所有文章由本站和原作者保留一切权力,仅在保留本版权信息.原文链接.原文作者的情况下允许转载,转载请勿删改原文内容, 并不得用于商业用途. 谢谢合作.原文链接:动态语言切换(续)-designer中 ...
- 最近帮客户实施的基于SQL Server AlwaysOn跨机房切换项目
最近帮客户实施的基于SQL Server AlwaysOn跨机房切换项目 最近一个来自重庆的客户找到走起君,客户的业务是做移动互联网支付,是微信支付收单渠道合作伙伴,数据库里存储的是支付流水和交易流水 ...
- DataGrid 列头实现国际化语言切换
<DataGrid> <DataGrid.Columns> <DataGridTextColumn Binding="{x:Null}" Width= ...
- Android app应用多语言切换功能实现
最近在做一个多语言切换的功能,类似于微信的语言切换,搜了下资料基本上都是以下这种: 1. 实现的效果 和微信类似,在设置界面打开切换语言的界面,选择语言后重启 HomeActivity,语言切换完成, ...
- ABP的语言切换
在ABP官网http://www.aspnetboilerplate.com/创建一个Multi Page Web Application项目并打开,在Web项目下可以找到一个Controllers/ ...
- iOS 语言切换、本地化,国际化
什么是本地化处理? 本地化处理就是我们的应用程序有可能发布到世界的很多国家去,因为每个国家应用的语言是不一样的,所以我们要把我们的应用程序的语言要进行本地化处理一下. 本地化处理需要处理那些文件? ( ...
- 【转】Android 语言切换过程分析
最近在看一个bug,系统切换语言后,本来退到后台的音乐,会在通知栏上显示通知.为了解决这个bug,我学习了下android的语言切换流程,也参考了大量其他人的资料.(主要参考了http://blog. ...
随机推荐
- vuex 基础:教程和说明
作者注:[2016.11 更新]这篇文章是基于一个非常旧的 vuex api 版本而写的,代码来自于2015年12月.但是,它仍能针对下面几个问题深入探讨: vuex 为什么重要 vuex 如何工作 ...
- 内存映射函数remap_pfn_range学习——示例分析(2)
li {list-style-type:decimal;}ol.wiz-list-level2 > li {list-style-type:lower-latin;}ol.wiz-list-le ...
- delphi实现数字签名
上周,另一部门需要支援解决数字签名问题.但因为之前也没做过,现学现卖.此方面可参考的中文资料较少,特作分享,方便查阅. 上周,另一部门需要支援解决数字签名问题.但因为之前也没做过,现学现卖.此方面可参 ...
- AES加解密算法在Android中的应用及Android4.2以上版本调用问题
from://http://blog.csdn.net/xinzheng_wang/article/details/9159969 AES加解密算法在Android中的应用及Android4.2以上 ...
- [wxWidgets]_[0基础]_[不常见但有用的类wxStandardPaths]
场景: 1.wxStandardPaths 用来获取各种系统路径.能够用于存放app的配置数据.比方文档文件夹,appData等. 代码: #include "wx/wxprec.h&q ...
- 短址服务 api
1 is.gd 他这个api简单: http://is.gd/api.php?longurl= 后面加网址就可以返回短址 2 Google URL Shortener API api地址: http ...
- golang导入包的几个说明:import
导入包: 标准包使用的是给定的短路径,如"fmt"."net/http" 自己的包,需要在工作目录(GOPATH)下指定一个目录,improt 导入包,实际上就 ...
- SQL Server 函数 LEN 与 DATALENGTH的区别
http://blog.csdn.net/Hello_World_wusu/article/details/4667452 DATALENGTH()函数返回一个用于对值进行管理的字节数,这有助于揭示不 ...
- Asp.net WebAPI Request参数验证-请不要重复造轮子
随着web客户端的发展,现在很多公司都有专业的前端开发,做到系统前后端分离.ap.net后端典型的就是采用webapi,但是发现很多时候大家对webapi并不了解,这里我们来说说输入参数的验证.前一段 ...
- js将滚动条滚动到指定位置的方法
代码如下(主要是通过设置Location的hash属性): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...