欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-26 08:21:30
前言 本文将介绍在 angular4 项目中配置 ngx-translate i18n 国际化组件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: npm...

前言

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

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

测试

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": "你好"
}

测试结果

在中文下

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

在英文下

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

示例代码

github地址:angular + ngx-translate

本地下载地址:

参考文章

总结

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