简介
在某些情况下，您的Web应用程序可能需要为多语言用户群提供服务。国际化，或简称_i18n_，是让你的应用程序对那些使用不同母语的人可用的过程。
虽然Angel有一些内置的i18n功能，但ngx-translate是一个第三方包，它提供了一些可能更适合您的用例的功能。
在本文中，您将在一个角度应用程序中使用ngx-Translate。
前提条件
要完成本教程，您需要：
- 本地安装node.js，可按照如何安装node.js并创建本地开发Environment.
- 对设置角度project.》有所了解
本教程通过了Node v16.4.0、npmv7.19.0、@Angel/corev12.1.0、@ngx-Translate/corev13.0.0、@ngx-Translate/http-loaderv6.0.0验证。
设置项目
创建一个全新的角度应用程序并添加一些依赖项。
打开您的终端，使用@angular/cli创建一个新项目：
1ng new angular-ngx-translate-example --skip-tests
然后导航到新创建的项目目录：
1cd angular-ngx-translate-example
接下来，运行以下命令将包添加到应用程序中：
1npm install @ngx-translate/[email protected]
现在导入您的AppModule中的TranslateModule：
1[label src/app/app.module.ts]
2import { NgModule } from '@angular/core';
3import { BrowserModule } from '@angular/platform-browser';
4import { TranslateModule } from '@ngx-translate/core';
5
6import { AppComponent } from './app.component';
7
8@NgModule({
9 declarations: [
10 AppComponent
11 ],
12 imports: [
13 BrowserModule,
14 TranslateModule.forRoot()
15 ],
16 providers: [],
17 bootstrap: [AppComponent]
18})
19export class AppModule { }
这将提供对翻译服务、管道和指令的核心的访问。
但是，除非您计划通过代码手动添加每个翻译，否则您可能希望在此阶段添加一些配置，以便更轻松地加载翻译。
使用TraslateHttpLoader
加载翻译的最常见方法可能是将您的翻译文件作为资产包含在内，并通过TranslateHttpLoader加载它们，该TranslateHttpLoader位于单独的NPM包中。
1npm install @ngx-translate/http-loader@6.0.0
现在在您的AppModule中导入TranslateHttpLoader：
1[label src/app/app.module.ts]
2import { NgModule } from '@angular/core';
3import { BrowserModule } from '@angular/platform-browser';
4import { HttpClientModule, HttpClient } from '@angular/common/http';
5import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
6import { TranslateHttpLoader } from '@ngx-translate/http-loader';
7
8import { AppComponent } from './app.component';
9
10// AoT requires an exported function for factories
11export function HttpLoaderFactory(http: HttpClient) {
12 return new TranslateHttpLoader(http);
13}
14
15@NgModule({
16 declarations: [
17 AppComponent
18 ],
19 imports: [
20 BrowserModule,
21 HttpClientModule,
22 TranslateModule.forRoot({
23 loader: {
24 provide: TranslateLoader,
25 useFactory: HttpLoaderFactory,
26 deps: [HttpClient]
27 }
28 })
29 ],
30 providers: [],
31 bootstrap: [AppComponent]
32})
33export class AppModule { }
您可以自由创建自己的加载器。您需要实现TranslateLoader接口，并在您的模块中提供它，如上。
使用翻译文件
以这种方式创建转换加载器需要在您的项目中的/sets/i18n/文件夹下有一个名为{lang}.json的文件，其中{lang}是您要用于翻译的文件的语言。例如，对于英语，该文件可以是en.json。
您可以通过向new TranslateHttpLoader()构造函数提供额外的参数来更改默认路径和文件扩展名。
翻译文件是一个键值对的JSON对象，其中键描述了翻译的文本，值是文件指定语言的实际文本。
1[label src/assets/i18n/en.json]
2{
3 "welcomeMessage": "Thanks for joining, {{ firstName }}! It's great to have you!",
4 "login": {
5 "username": "Enter your user name",
6 "password": "Password here"
7 }
8}
该值也可以是另一个对象，它允许您随心所欲地对翻译进行分组。
在翻译值的文本中，还可以将双花括号括在变量名周围，这将允许您稍后在翻译中动态插入字符串。
翻译
在应用程序中访问这些翻译之前，必须初始化TranslateService中的一些属性。
可能最好的地方是在你的引导AppComponent中。
1[label src/app/app.component.ts]
2import { Component } from '@angular/core';
3import { TranslateService } from '@ngx-translate/core';
4
5@Component({
6 selector: 'app-root',
7 templateUrl: './app.component.html',
8 styleUrls: ['./app.component.css']
9})
10export class AppComponent {
11 constructor(translate: TranslateService) {
12 translate.addLangs(['en', 'klingon']);
13 translate.setDefaultLang('en');
14 translate.use('en');
15 }
16}
首先，translate.addLangs（[])告诉服务哪些语言可用于翻译。
方法translate.setDefaultLang（'en ')允许您指定在当前语言缺少翻译的情况下使用的备用翻译集。
Translate.use(‘en’)告诉服务当前使用哪种语言进行翻译。
所有这些的参数都是您要从中提取翻译的语言--这些参数应该与定义这些语言的翻译的JSON文件的名称相匹配。
有了这个设置，您有三种方法可以访问翻译。您在任何给定时间使用哪一种将取决于您的需求和偏好。
使用TranslateService
使用这项服务，有两种方法可以获得您的翻译。
第一种也是推荐的方法是使用：
1get(key: string|Array<string>, interpolateParams?: Object)`
这将返回一个可观察对象，因此是异步的，这确保在使用该值之前加载转换文件。然后，只要检索到值，该可观测对象就会完成。
第二种方法是使用：
1instant(key: string|Array<string>, interpolateParams?: Object)`
这是同步的。如果在使用此方法时翻译文件尚未加载完毕，则根本得不到翻译。
记住，我们告诉服务使用en作为当前的lang，所以所有的翻译结果最初都将来自en.json。
1[label src/app/app.component.ts]
2import { Component } from '@angular/core';
3import { TranslateService } from '@ngx-translate/core';
4
5@Component({
6 selector: 'app-root',
7 templateUrl: './app.component.html',
8 styleUrls: ['./app.component.css']
9})
10export class AppComponent {
11 user!: { firstName: string; lastName: string; };
12 welcome!: string;
13 usernameLabel!: string;
14 passwordLabel!: string;
15
16 constructor(translate: TranslateService) {
17 translate.addLangs(['en', 'klingon']);
18 translate.setDefaultLang('en');
19 translate.use('en');
20 }
21
22 ngOnInit() {
23 // hardcoded example
24 this.user = { firstName: 'Sammy', lastName: 'Shark' };
25
26 // synchronous. Also interpolate the 'firstName' parameter with a value.
27 this.welcome = this.translate.instant('welcomeMessage', { firstName: this.user.firstName });
28
29 // asynchronous - gets translations then completes.
30 this.translate.get(['login.username', 'login.password'])
31 .subscribe(translations => {
32 this.usernameLabel = translations['login.username'];
33 this.passwordLabel = translations['login.password'];
34 });
35 }
36}
您可以在您的应用程序中实现自己的方法来在语言之间切换-无论是通过选择框、URL路由还是其他方法，在TranslateService上调用use(lang：string)方法来设置当前语言。
使用TranslatePipe
您可以使用平移管道，就像在角度中使用任何其他管道一样。管道中的输入是您所需转换的关键。可选参数是定义转换所需的任何内插字符串的对象。
在下面的示例中，组件有一个user对象，属性为FirstName：
1[label src/app/app.component.html]
2<p>{{ 'welcomeMessage' | translate: user }}</p>
这段代码将产生一条消息：‘’谢谢你的加入，Sammy！很高兴有你！‘’。
这与欢迎消息的值所期望的内插值相匹配。
1[label src/app/app.component.html]
2<input type="password" placeholder="{{ 'login.password' | translate }}">
此代码将生成一个输入，占位符为：password here。
使用TranslateDirective
您还可以在任何HTML元素上放置指令以获得翻译。
有几种不同的方法可以做到这一点。
1[label src/app/app.component.html]
2<label translate='login.username'></label>
此代码将生成一个标签：输入您的用户名。
您还可以将翻译的键设置为元素的内容。
1[label src/app/app.component.html]
2<p translate [translateParams]="{ firstName: user.firstName }">welcomeMessage</p>
这段代码将产生一条消息：‘’谢谢你的加入，Sammy！很高兴有你！‘’。
结论
在本文中，您在一个角度应用程序中使用了ngx-Translate。
通过阅读Angular.中的内置I18N支持]继续学习