介绍

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

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

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

先决条件

要完成本教程，您需要：

• Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。
• 对设置 Angular 项目有一定的了解。

本教程已通过 Node v16.4.0、npmv7.19.0、@angular/corev12.1.0、@ngx-translate/corev13.0.0 和@ngx-translate/http-loaderv6.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

现在导入TranslateModule您的AppModule：

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

现在导入TranslateHttpLoader您的AppModule：

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 对象，其中键描述翻译的文本，值是文件指定语言的实际文本。

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

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

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

访问翻译

在您的应用程序中访问这些翻译之前，您必须在TranslateService.

可能最好的地方是在你的 bootstrapped AppComponent.

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最初。

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 路由还是其他一些方法，调用 上的use(lang: string)方法TranslateService来设置当前语言。

使用 TranslatePipe

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

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

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

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

这与 的值预期的插值相匹配welcomeMessage。

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

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

使用 TranslateDirective

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

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

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

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

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

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

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

结论

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

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