angular多语言配置详解

npm install @ngx-translate/core --save

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

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

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

// other module
import {TranslateModule} from '@ngx-translate/core';
// 自定义加载方法
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json"htmlcode">

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



应用的时候我们可以使用点语法，例如：Introduce.Name。
好了，定义好之后再来看如何使用。我们可以使用服务或管道或指令的方式来达到显示语言的效果。在使用之前，我们需要在应用中初始化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，因为一个系统的翻译是统一的，在开始应用的时候就需要设置好默认语言。这里使用translate.setDefaultLang('en')来设置默认语言为英文。然后使用translate.user('en')手动选择使用英文。在切换语言的时候，我们使用translate.user([lang])来设置启用哪个语言。
最后来使用翻译，有多种使用的方式。来看看。
使用方式


使用Service的方式


在运行的时候，会先发起个请求通过Http获取翻译文件，通过Observable的方式应用参数上去，然后获得翻译的内容。


// 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里定义参数param:


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



使用指令


管道的方式虽然方便，但参数还是需要在先定义好，这样子变量多的话也比较繁琐。使用指令的方式可以在程序中直接传参：


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


或者直接将元素的内容作为key：


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


应用html标签


可以在翻译文件中中定义简单的行级html标签


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



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


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


常用方法


instant() 即时翻译


有些情况下，我们要在js里面动态的获取值和赋值，这时候没法使用模板语法，使用subscribe的方式又不利于代码的组织，这时候我们需要即时翻译来搞定了。方法定义：


instant(key: string|Array<string>), insterpolateParams"htmlcode">

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


但是需要注意的是，这个方法是同步的，默认加载器是异步的。使用这个方法需要确保翻译文件已经加载完成了，如果不确定，就应该用get的方式。


参考：
https://www.npmjs.com/package/@ngx-translate/core


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。