本篇文章為大家展示了怎么在angular中實(shí)現(xiàn)多語(yǔ)言配置，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷、企業(yè)網(wǎng)站建設(shè)，賣友情鏈接，廣告投放平臺(tái)為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。

angular的國(guó)際化方案，采用ngx-translate來(lái)實(shí)現(xiàn)。

安裝模塊：

npm install @ngx-translate/core --save

在根模塊中導(dǎo)入：

// other module
import {TranslateModule} from '@ngx-translate/core';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    // other module
    TranslateModule.forRoot(),

  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

我們希望可以在一個(gè)固定的文件里面配置對(duì)應(yīng)的翻譯文件，然后在每個(gè)用到的組件里面使用它，隨意我們需要借助TranslateHttpLoader來(lái)加載翻譯文件。首先安裝TranslateHttpLoader:

npm install @ngx-translate/http-loader --save

翻譯文件可以放在/assets/i18n/[lang].json中，[lang]代表使用的語(yǔ)言文件名稱。然后我們可以在跟組件中添加配置對(duì)應(yīng)的加載項(xiàng)：

// other module
import {TranslateModule} from '@ngx-translate/core';
// 自定義加載方法
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json?');
}
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    // other module
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      }
    }),
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

然后我們?cè)诜g文件中配置一個(gè)簡(jiǎn)單的示例：

// /asserts/il8n/en.json
{
 "Hello": "hello, {{value}}",
 "Introduce": {
  "Name": "my name is {{name}}.",
  "Today": "today is {{date}}, and now time is {{time}}"
 }
}

應(yīng)用的時(shí)候我們可以使用點(diǎn)語(yǔ)法，例如：Introduce.Name。

好了，定義好之后再來(lái)看如何使用。我們可以使用服務(wù)或管道或指令的方式來(lái)達(dá)到顯示語(yǔ)言的效果。在使用之前，我們需要在應(yīng)用中初始化TranslateService：

import { Component } from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.less']
})
export class AppComponent {
 constructor(
   public translate: TranslateService,
 ) {
   this.translate.setDefaultLang('en');
   this.translate.use('en');
 }
}

我傾向于在跟組件的construct里面初始化TranslateService，因?yàn)橐粋€(gè)系統(tǒng)的翻譯是統(tǒng)一的，在開(kāi)始應(yīng)用的時(shí)候就需要設(shè)置好默認(rèn)語(yǔ)言。這里使用translate.setDefaultLang('en')來(lái)設(shè)置默認(rèn)語(yǔ)言為英文。然后使用translate.user('en')手動(dòng)選擇使用英文。在切換語(yǔ)言的時(shí)候，我們使用translate.user([lang])來(lái)設(shè)置啟用哪個(gè)語(yǔ)言。

最后來(lái)使用翻譯，有多種使用的方式。來(lái)看看。

使用方式

使用Service的方式

在運(yùn)行的時(shí)候，會(huì)先發(fā)起個(gè)請(qǐng)求通過(guò)Http獲取翻譯文件，通過(guò)Observable的方式應(yīng)用參數(shù)上去，然后獲得翻譯的內(nèi)容。

// app.compent.ts
this.translate.get(
  'Introduce.Name',
  {name: 'Jarvis'}
).subscribe((res: string) => {
  console.log('res', res); // res my name is Jarvis.
});
this.translate.get(
  'Introduce.Today',
  {
    date: new Date().getDate(),
    time: new Date().getTime()
  },
).subscribe((res: string) => {
  console.log('res', res); // res today is 22, and now time is 1534937370461
});

使用pipe的方式

<div>{{'Hello' | translate: param</div>

在js里定義參數(shù)param:

const param = {
  value: 'world',
};

使用指令

管道的方式雖然方便，但參數(shù)還是需要在先定義好，這樣子變量多的話也比較繁瑣。使用指令的方式可以在程序中直接傳參：

<span [translate]="'Introduce.Name'" [translateParams]="{name: 'Jarvis'}"></span>

或者直接將元素的內(nèi)容作為key：

<span translate [translateParams]="{date: '10.11', time: '20:33'}">Introduce.Today</span>

應(yīng)用html標(biāo)簽

可以在翻譯文件中中定義簡(jiǎn)單的行級(jí)html標(biāo)簽

{
 "Hello": "hello, {{value}}",
}

要渲染它們，在任何元素上只需要將innerHTML屬性和管道一同使用即可。

<p [innerHTML]="'Introduce.Name'| translate: param"></p>

常用方法

instant() 即時(shí)翻譯

有些情況下，我們要在js里面動(dòng)態(tài)的獲取值和賦值，這時(shí)候沒(méi)法使用模板語(yǔ)法，使用subscribe的方式又不利于代碼的組織，這時(shí)候我們需要即時(shí)翻譯來(lái)搞定了。方法定義：

instant(key: string|Array<string>), insterpolateParams?: Object):string|Object

調(diào)用的時(shí)候傳入key和對(duì)應(yīng)的參數(shù)，即可返回當(dāng)前key的翻譯：

this.translate.instant('HELLO', {value: 'Jarvis'});

上述內(nèi)容就是怎么在angular中實(shí)現(xiàn)多語(yǔ)言配置，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享名稱：怎么在angular中實(shí)現(xiàn)多語(yǔ)言配置-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)路徑：http://aaarwkj.com/article2/iopic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)頁(yè)設(shè)計(jì)公司、微信小程序、搜索引擎優(yōu)化、網(wǎng)站營(yíng)銷、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)