使用 @ngx-translate http-loader 加载多语言翻译文件

当我们的应用需要支持多语言的时候，@ngx-translate 是一个非常棒的选择。它可以帮助我们很容易的实现翻译功能。而 http-loader 则可以帮助我们在应用中，使用 http 请求的方式，来获取我们的多语言翻译文件。

安装

我们可以通过 npm 来安装 @ngx-translate 和 http-loader。

npm install @ngx-translate/http-loader

使用

在应用中，我们需要进行一些初始化的工作来设置 @ngx-translate，以及加载我们的多语言文件。

初始化

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (http: HttpClient) => {
          return new TranslateHttpLoader(http, './assets/i18n/', '.json');
        },
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在上述代码中，我们使用 @ngx-translate 的 TranslateModule 来进行初始化。其中，useFactory 中的参数 http 即为我们的 HttpClient，用来发送 http 请求获取翻译文件。我们通过 new TranslateHttpLoader 来设置翻译文件的路径及后缀名。

加载翻译文件

在我们的组件中，我们需要通过 TranslateService 来加载指定的多语言文件。

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 {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
    translate.use('en');
  }
}

在上述代码中，我们通过 TranslateService 来指定使用哪种语言，并设置默认语言。

模板中使用翻译

在我们的组件模板中，我们可以通过 translate pipe 来使用翻译。

<h2>{{ 'HELLO' | translate }}</h2>

在上述代码中，我们通过 translate pipe 来翻译 'HELLO' 字符串。

总结

@ngx-translate 和 http-loader 可以很容易地帮助我们实现应用多语言能力。通过 http-loader，我们可以使用 http 请求的方式，获取多语言翻译文件。这使得我们的多语言文件非常方便地进行管理，可以通过外部工具进行翻译，并交给翻译人员进行维护，开发人员只需要关注代码即可。