前言
本文将介绍在 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/) "htmlcode">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/) "color: #ff0000">添加多语言文件在 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
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对的支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“Angular4项目中添加i18n国际化插件ngx-translate的步骤详解”评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?