欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular4項(xiàng)目中添加i18n國(guó)際化插件ngx-translate的步驟詳解

 更新時(shí)間:2017年07月02日 10:59:36   作者:1CSH1  
這篇文章主要跟大家介紹了關(guān)于Angular4項(xiàng)目中添加i18n國(guó)際化插件ngx-translate的步驟,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。

前言

本文將介紹在 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

參考文章

ngx-translate core

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

  • 深入解析Angular動(dòng)態(tài)導(dǎo)入和懶加載實(shí)例

    深入解析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ù)的用法

    簡(jiǎn)介AngularJS中$http服務(wù)的用法

    我們可以使用內(nèi)置的$http服務(wù)直接同外部進(jìn)行通信。$http服務(wù)只是簡(jiǎn)單的封裝了瀏覽器原生的XMLHttpRequest對(duì)象。接下來通過本文給大家簡(jiǎn)單介紹angularjs中http服務(wù)的用法,喜歡的朋友可以參考下
    2016-02-02
  • AngularJS實(shí)踐之使用NgModelController進(jìn)行數(shù)據(jù)綁定

    AngularJS實(shí)踐之使用NgModelController進(jìn)行數(shù)據(jù)綁定

    大家都知道AngularJS中的指令是其尤為復(fù)雜的一個(gè)部分,但是這也是其比較好玩的地方。這篇文章我們就來說一說如何在我們自定義的指令中,利用ngModel的controller來做雙向數(shù)據(jù)綁定,本文對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值,有需要的朋友們可以參考借鑒。
    2016-10-10
  • Angular實(shí)現(xiàn)的進(jìn)度條功能示例

    Angular實(shí)現(xiàn)的進(jìn)度條功能示例

    這篇文章主要介紹了Angular實(shí)現(xiàn)的進(jìn)度條功能,結(jié)合實(shí)例形式較為詳細(xì)的分析了angular進(jìn)度條功能的相關(guān)界面布局、功能等操作技巧,需要的朋友可以參考下
    2018-02-02
  • Angular中的結(jié)構(gòu)指令模式及使用詳解

    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ù)問題

    這篇文章主要介紹了Angular中ng-repeat與ul li的多層嵌套重復(fù)問題,需要的朋友可以參考下
    2017-07-07
  • AngularJS基礎(chǔ)學(xué)習(xí)筆記之指令

    AngularJS基礎(chǔ)學(xué)習(xí)筆記之指令

    指令(Directives)是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令,但還是經(jīng)常需要?jiǎng)?chuàng)建應(yīng)用特定的指令。這篇教程會(huì)為你講述如何自定義指令,以及介紹如何在實(shí)際項(xiàng)目中使用。
    2015-05-05
  • Angular.JS實(shí)現(xiàn)無限級(jí)的聯(lián)動(dòng)菜單(使用demo)

    Angular.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項(xiàng)目中共享模塊的實(shí)現(xiàn)

    本文主要介紹了Angular的共享模塊的實(shí)現(xiàn),對(duì)此感興趣的同學(xué),可以實(shí)驗(yàn)一下
    2021-05-05
  • 詳解Angular Reactive Form 表單驗(yàn)證

    詳解Angular Reactive Form 表單驗(yàn)證

    本文我們將介紹 Reactive Form 表單驗(yàn)證的相關(guān)知識(shí),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-07-07

最新評(píng)論