Angular4项目中添加i18n国际化插件ngx

Angular4项目中添加i18n国际化插件ngx

前言

本文将介绍在 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 '@http://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

],

imNHLVOSports: [

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 : 'zhNHLVOS');

// --- set i18n end ---

}

}

添加多语言文件

在 src/app/assets/ 下创建 i18n 文件夹，并在文件夹内创建 en.json 和 zh.json 文件

测试

app.component.html

添加代码：

test the i18n module: ngx-translate

在 en.json 和 zh.json 文件中添加配置

en.json

{

"hello": "the word is hello"

}

zh.json

{

"hello": "你好"

}

测试结果

在中文下

在英文下

示例代码

github地址：angular + ngx-translate

本地下载地址：http://xiazai.jb51.net/201707/yuanma/james-blog-ui(jb51.net).rar

参考文章

ngx-translate core

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对我们的支持。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。