深入浅出angular8.x + ngx-translate实现国际化

2024-02-05 02:47:01

ngx-translate是一个功能强大的库，它允许您轻松实现应用程序的国际化。在这篇文章中，我将指导您如何使用ngx-translate在Angular8.x应用程序中实现国际化。此外，我还将向您展示如何使用请求后台获取翻译模板json，以便您可以在应用程序中使用来自服务器的翻译模板。

先决条件

Angular8.x
npm

安装

首先，您需要安装ngx-translate。您可以使用以下命令进行安装：

npm install ngx-translate --save

安装完成后，您需要在您的Angular应用程序的根模块中导入ngx-translate模块。

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

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  declarations: [],
  bootstrap: []
})
export class AppModule { }

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}

配置

接下来，您需要配置ngx-translate。您可以通过在您的应用程序的根组件中添加以下代码来进行配置：

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      {{ 'Hello world' | translate }}
    </div>
  `,
})
export class AppComponent {

  constructor(private translateService: TranslateService) {
    translateService.setDefaultLang('en');
    translateService.use('en');
  }
}

使用

现在，您可以在您的应用程序中使用ngx-translate了。您可以使用管道translate来翻译文本。例如，以下代码将翻译文本Hello world为当前语言：

{{ 'Hello world' | translate }}

请求后台获取翻译模板json

如果您想使用来自服务器的翻译模板，您可以使用HttpLoader来加载翻译模板json。您可以通过在您的应用程序的根模块中添加以下代码来进行配置：

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

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  declarations: [],
  bootstrap: []
})
export class AppModule { }

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, 'http://localhost:3000/assets/i18n/', '.json');
}