如何在Angular中使用ngx-translate

介绍

在某些时候，您的 Web 应用程序可能需要为多语言用户群提供服务。 国际化，或简称为i18n，是您使您的应用程序可用于具有不同母语的人的过程。

虽然 Angular 有一些内置的 i18n 功能，但 ngx-translate 是一个第三方包，它提供了一些可能更适合您的用例的功能。

在本文中，您将在 Angular 应用程序中使用 ngx-translate。

先决条件

要完成本教程，您需要：

• Node.js 安装在本地，您可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行。
• 熟悉 设置 Angular 项目 。

本教程已使用 Node v16.4.0、npm v7.19.0、@angular/core v12.1.0、@ngx-translate/core v13.0.0 和 @ngx-translate/http-loader v6.0.0 验证.

设置项目

创建一个全新的 Angular 应用程序并添加一些依赖项。

打开终端并使用 @angular/cli 创建一个新项目：

ng new angular-ngx-translate-example --skip-tests

然后导航到新创建的项目目录：

cd angular-ngx-translate-example

接下来，运行以下命令将包添加到您的应用程序：

npm install @ngx-translate/core@13.0.0

现在在 AppModule 中导入 TranslateModule：

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TranslateModule } from '@ngx-translate/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TranslateModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这将提供对翻译服务、管道和指令核心的访问。

但是，除非您打算通过代码手动添加每个翻译，否则您可能希望在此阶段添加一些配置，以便更轻松地加载翻译。

使用 TraslateHttpLoader

加载翻译的最常见方法可能是将翻译文件作为资产包含并通过 TranslateHttpLoader 加载它们，它在单独的 npm 包中提供。

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

现在在 AppModule 中导入 TranslateHttpLoader：

src/app/app.module.ts

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

import { AppComponent } from './app.component';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

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

您可以自由创建自己的加载程序。 您将需要实现 TranslateLoader 接口，并像上面一样在您的模块中提供它。

使用翻译文件

以这种方式创建翻译加载器需要您在项目中的 /assets/i18n/ 文件夹下有一个文件，称为 {lang}.json，其中 {lang} 是您正在使用的文件的语言用于翻译。 例如，对于英语，此文件可能是 en.json。

您可以通过向 new TranslateHttpLoader() 构造函数提供额外参数来更改默认路径和文件扩展名。

翻译文件是键值对的 JSON 对象，其中键描述被翻译的文本，值是文件指定语言的实际文本。

src/assets/i18n/en.json

{
  "welcomeMessage": "Thanks for joining, {{ firstName }}! It's great to have you!",
  "login": {
    "username": "Enter your user name",
    "password": "Password here"
  }
}

该值也可以是另一个对象，它允许您根据需要对翻译进行分组。

在您的翻译值的文本中，您还可以在变量名称周围包含双花括号，这将允许您稍后将字符串动态插入到您的翻译中。

访问翻译

在您可以在应用程序中访问这些翻译之前，您必须初始化 TranslateService 中的一些属性。

执行此操作的最佳位置可能是在您引导的 AppComponent 中。

src/app/app.component.ts

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(translate: TranslateService) {
    translate.addLangs(['en', 'klingon']);
    translate.setDefaultLang('en');
    translate.use('en');
  }
}

首先，translate.addLangs([]) 告诉服务哪些语言可用于翻译。

方法 translate.setDefaultLang('en') 允许您指定一组备用翻译，以防当前语言缺少翻译。

translate.use('en') 告诉服务当前用于翻译的语言。

所有这些的参数是您要从中提取翻译的语言 - 这些应该与定义这些语言的翻译的 JSON 文件的名称相匹配。

使用该设置，您可以通过三种方式访问翻译。 您在任何给定时间使用哪一个将取决于您的需求和偏好。

使用 TranslateService

使用该服务，有两种方法可以获取您的翻译。

第一种也是推荐的方法是使用：

get(key: string|Array<string>, interpolateParams?: Object)`

这将返回一个 Observable，因此是异步的，这保证了翻译文件将在使用该值之前被加载。 一旦检索到该值，此 Observable 就会立即完成。

第二种方法是使用：

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

这是同步的。 如果在您使用此方法时翻译文件没有完成加载，您将根本无法获得翻译。

请记住，我们告诉服务使用 en 作为当前语言，因此所有翻译结果最初将来自 en.json。

src/app/app.component.ts

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 {
  user!: { firstName: string; lastName: string; };
  welcome!: string;
  usernameLabel!: string;
  passwordLabel!: string;

  constructor(translate: TranslateService) {
    translate.addLangs(['en', 'klingon']);
    translate.setDefaultLang('en');
    translate.use('en');
  }

  ngOnInit() {
    // hardcoded example
    this.user = { firstName: 'Sammy', lastName: 'Shark' };

    // synchronous. Also interpolate the 'firstName' parameter with a value.
    this.welcome = this.translate.instant('welcomeMessage', { firstName: this.user.firstName });

    // asynchronous - gets translations then completes.
    this.translate.get(['login.username', 'login.password'])
      .subscribe(translations => {
        this.usernameLabel = translations['login.username'];
        this.passwordLabel = translations['login.password'];
      });
  }
}

您可以在应用程序中实现自己的方法来切换语言——无论是通过选择框、URL 路由还是其他方法，在 TranslateService 上调用 use(lang: string) 方法来设置当前语言.

使用 TranslatePipe

您可以像在 Angular 中使用任何其他管道一样使用翻译管道。 管道的输入是您需要的翻译的关键。 可选参数是一个对象，它定义了翻译所期望的任何插值字符串。

在下面的示例中，组件具有 user 对象，其属性为 firstName：

src/app/app.component.html

<p>{{ 'welcomeMessage' | translate: user }}</p>

此代码将产生一条消息："Thanks for joining, Sammy! It's great to have you!"。

这与 welcomeMessage 的值所期望的插值相匹配。

src/app/app.component.html

<input type="password" placeholder="{{ 'login.password' | translate }}">

此代码将生成一个带有占位符的输入："Password here"。

使用 TranslateDirective

您还可以在任何 HTML 元素上放置指令以获取翻译。

有几种不同的方法可以做到这一点。

src/app/app.component.html

<label translate='login.username'></label>

此代码将产生一个标签："Enter your user name"。

您还可以将翻译的键设置为元素的内容。

src/app/app.component.html

<p translate [translateParams]="{ firstName: user.firstName }">welcomeMessage</p>

此代码将产生一条消息："Thanks for joining, Sammy! It's great to have you!"。

结论

在本文中，您在 Angular 应用程序中使用了 ngx-translate。

通过阅读 Angular 中的 内置 i18n 支持来继续学习。