angular多语言配置详解

angular的国际化方案，采用ngx-translate来实现。

安装模块：

npm install @ngx-translate/core --save

在根模块中导入：

// other moduleimport {TranslateModule} from '@ngx-translate/core';@NgModule({  declarations: [    AppComponent,  ],  imports: [    // other module    TranslateModule.forRoot(),  ],  providers: [  ],  bootstrap: [AppComponent]})export class AppModule {}

我们希望可以在一个固定的文件里面配置对应的翻译文件，然后在每个用到的组件里面使用它，随意我们需要借助TranslateHttpLoader来加载翻译文件。首先安装TranslateHttpLoader:

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

翻译文件可以放在/assets/i18n/[lang].json中，[lang]代表使用的语言文件名称。然后我们可以在跟组件中添加配置对应的加载项：

// other moduleimport {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 {}

然后我们在翻译文件中配置一个简单的示例：

// /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的方式应用参数上去，然后获得翻译的内容。