angular做语言切换_angular5 基于ngx-translate实现多语言切换
angular的坑永远都是那么多，当然了，主要还是我太菜~
基于ngx-translate实现多语言切换这个功能，我又是折腾了很久，下面是我实现的过程：
1、安装ngx-translate
需要安装@ngx-translate/core和@ngx-translate/http-loader，我的问题主要出在这个，angular的版本不同，要安装对应组件的版本也不同。
我本地用的是angular5，使用最新的版本，会报错。。
针对angular5版本的组件安装命令是：
npm install @ngx-translate/[email protected]--save
npm install @ngx-translate/[email protected]2.0.1 --save
如果你用的不是angular5，可以到下面对应的changelog页面，查找对应的版本号：
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‘;
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient);
}
@NgModule中添加支持(红色内容是添加的内容)：
@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文件内容如下：
{
"search": "search",
"submit": "Submit",
"home": {
"firstPage": "First",
"lastPage": "Last",
"previousPage": "Previous",
"nextPage": "Next"
}
}
zh.json文件内容如下：
{
"search": "搜索",
"submit": "提交",
"home": {
"firstPage": "首页",
"lastPage": "末页",
"previousPage": "上一页",
"nextPage": "下一页"
}
}
5、在html页面中可以引入资源
{{‘search‘ | translate}}
{{‘home.firstPage‘ | translate}}
search和home.firstPage是资源的名称
原文：https://www.cnblogs.com/modou/p/9527230.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！