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 文件
测试
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
本地下载地址:
参考文章
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对的支持。
上一篇: AngularJS实现单一页面内设置跳转路由的方法
下一篇: JScript实现地址选择功能