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

作者: 思玥宝宝
来源: 51数据库
2021-08-21

前言

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

本地下载地址：

参考文章

总结

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