Angular4項目中如何添加i18n國際化插件ngx-translate

這篇文章給大家分享的是有關Angular4項目中如何添加i18n國際化插件ngx-translate的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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>
 <h2>{{ 'hello' | translate }}</h2>
</div>

在 en.json 和 zh.json 文件中添加配置

en.json

{
 "hello": "the word is hello"
}

zh.json

{
 "hello": "你好"
}

測試結果

在中文下

在英文下

感謝各位的閱讀！關于“Angular4項目中如何添加i18n國際化插件ngx-translate”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！