Angular4項目中添加i18n國際化插件ngx-translate的步驟詳解
更新時間：2017年07月02日 10:59:36 作者：1CSH1
這篇文章主要跟大家介紹了關(guān)于Angular4項目中添加i18n國際化插件ngx-translate的步驟，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
前言
本文將介紹在 Angular4 項目中配置 ngx-translate i18n 國際化組件的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹：
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]
}
})
]
結(jié)果如下：
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 ---
}
結(jié)果如下：
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/ 下創(chuàng)建 i18n 文件夾，并在文件夾內(nèi)創(chuàng)建 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": "你好"
}
測試結(jié)果
在中文下
在英文下
示例代碼
Github地址：angular + ngx-translate
本地下載地址：http://xiazai.jb51.net/201707/yuanma/james-blog-ui(jb51.net).rar
參考文章
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
您可能感興趣的文章:
相關(guān)文章
深入解析Angular動態(tài)導(dǎo)入和懶加載實例
這篇文章主要為大家深入解析了Angular動態(tài)導(dǎo)入和懶加載實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
我們可以使用內(nèi)置的$http服務(wù)直接同外部進(jìn)行通信。$http服務(wù)只是簡單的封裝了瀏覽器原生的XMLHttpRequest對象。接下來通過本文給大家簡單介紹angularjs中http服務(wù)的用法，喜歡的朋友可以參考下2016-02-02
AngularJS實踐之使用NgModelController進(jìn)行數(shù)據(jù)綁定
大家都知道AngularJS中的指令是其尤為復(fù)雜的一個部分，但是這也是其比較好玩的地方。這篇文章我們就來說一說如何在我們自定義的指令中，利用ngModel的controller來做雙向數(shù)據(jù)綁定，本文對大家學(xué)習(xí)AngularJS具有一定的參考借鑒價值，有需要的朋友們可以參考借鑒。2016-10-10
這篇文章主要介紹了Angular實現(xiàn)的進(jìn)度條功能,結(jié)合實例形式較為詳細(xì)的分析了angular進(jìn)度條功能的相關(guān)界面布局、功能等操作技巧,需要的朋友可以參考下2018-02-02
Angular中的結(jié)構(gòu)指令模式及使用詳解
這篇文章主要為大家介紹了Angular中的結(jié)構(gòu)指令模式及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Angular中ng-repeat與ul li的多層嵌套重復(fù)問題
這篇文章主要介紹了Angular中ng-repeat與ul li的多層嵌套重復(fù)問題,需要的朋友可以參考下2017-07-07
AngularJS基礎(chǔ)學(xué)習(xí)筆記之指令
指令（Directives）是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令，但還是經(jīng)常需要創(chuàng)建應(yīng)用特定的指令。這篇教程會為你講述如何自定義指令，以及介紹如何在實際項目中使用。2015-05-05
Angular.JS實現(xiàn)無限級的聯(lián)動菜單(使用demo)
這篇文章主要介紹了Angular.JS中實現(xiàn)無限級聯(lián)動菜單的使用示例，本文是在之前的一篇文章的基礎(chǔ)上進(jìn)行的幾個demo分享，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
本文主要介紹了Angular的共享模塊的實現(xiàn)，對此感興趣的同學(xué)，可以實驗一下2021-05-05
本文我們將介紹 Reactive Form 表單驗證的相關(guān)知識，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07