Angular4项目中添加i18n国际化插件ngx-translate的步骤详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Angular4项目中添加i18n国际化插件ngx-translate的步骤详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2890字，纯文字阅读大概需要5分钟。

内容图文

前言

本文将介绍在 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

添加代码：

<div>
 <span> test the i18n module: ngx-translate</span>
 <h1>{{ 'hello' | translate }}</h1>
</div>

在 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

总结

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

内容总结

以上是互联网集市为您收集整理的Angular4项目中添加i18n国际化插件ngx-translate的步骤详解全部内容，希望文章能够帮你解决Angular4项目中添加i18n国际化插件ngx-translate的步骤详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---