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