前言
本文將介紹在 Angular4 項目中配置 ngx-translate i18n 國際化組件的相關內容，分享出來供大家參考學習，下面來一起看看詳細的介紹：
npm 安裝 ngx-translate 模塊
npm install @ngx-translate/core --savenpm 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
本地下載地址：http://xiazai.VeVB.COm/201707/yuanma/james-blog-ui(VeVB.COm).rar
參考文章
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
