angular5 基于ngx-translate实现多语言切换

angular的坑永远都是那么多,当然了,主要还是我太菜~

基于ngx-translate实现多语言切换这个功能,我又是折腾了很久,下面是我实现的过程:

1、安装ngx-translate

需要安装@ngx-translate/core和@ngx-translate/http-loader,我的问题主要出在这个,angular的版本不同,要安装对应组件的版本也不同。

可以到官网查看对应版本的说明:https://github.com/ngx-translate/core

angular5 基于ngx-translate实现多语言切换

我本地用的是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';
  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://stackblitz.com/github/ngx-translate/example
上一篇:IOS 保存图片至相册


下一篇:剥开比原看代码16:比原是如何通过/list-transactions显示交易信息的