这篇文章主要跟大家介绍了关于Angular4项目中添加i18n国际化插件ngx-translate的步骤，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
前言
本文将介绍在 Angular4 项目中配置 ngx-translate i18n 国际化组件的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：
npm 安装 ngx-translate 模块
npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save
在 Angular 项目配置
app.module.ts
添加
import { TranslateLoader, TranslateModule} from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; imports: [ TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: (createTranslateHttpLoader), deps: [Http] } }) ]结果如下：
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpModule, Http } from '@angular/http'; import { TranslateLoader, TranslateModule} from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { AppComponent } from './app.component'; export function createTranslateHttpLoader(http: Http) { return new TranslateHttpLoader(http, './assets/i18n/', '.json'); } @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: (createTranslateHttpLoader), deps: [Http] } }) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }app.component.ts
添加
import { TranslateService } from "@ngx-translate/core"; constructor(public translateService: TranslateService) { } ngOnInit() { // --- set i18n begin --- this.translateService.addLangs(["zh", "en"]); this.translateService.setDefaultLang("zh"); const browserLang = this.translateService.getBrowserLang(); this.translateService.use(browserLang.match(/zh|en/) ? browserLang : 'zh'); // --- set i18n end --- }结果如下：
import { Component } from '@angular/core'; import { TranslateService } from "@ngx-translate/core"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; constructor(public translateService: TranslateService) { } ngOnInit() { // --- set i18n begin --- this.translateService.addLangs(["zh", "en"]); this.translateService.setDefaultLang("zh"); const browserLang = this.translateService.getBrowserLang(); this.translateService.use(browserLang.match(/zh|en/) ? browserLang : 'zh'); // --- set i18n end --- } }添加多语言文件
在 src/app/assets/ 下创建 i18n 文件夹，并在文件夹内创建 en.json 和 zh.json 文件
测试
app.component.html
添加代码：
test the i18n module: ngx-translate{{ 'hello' | translate }}
在 en.json 和 zh.json 文件中添加配置
en.json
{ "hello": "the word is hello" }zh.json
{ "hello": "你好" }测试结果
在中文下
在英文下
示例代码
Github地址：angular + ngx-translate
本地下载地址：http://xiazai.html.cn/201707/yuanma/james-blog-ui(html.cn).rar
参考文章
总结
以上就是Angular4项目中添加i18n国际化插件ngx-translate的步骤详解的详细内容，更多请关注易知道|edz.cc其它相关文章！
