在当今广阔的数字世界中，网络开发人员的目标是与全球受众建立联系。实现这一目标的关键策略是将您的 Angular 应用程序转变为多语言体验。欢迎使用国际化 (i18n)，您的应用程序可以使用用户的母语与用户进行交流，无论他们身在何处。在本博客中，我们将深入研究如何将 i18n 集成到您的 Angular 项目中，确保您的应用程序可供全球各地的人们访问且用户友好。

Angular 中的国际化 (i18n) 简介

将您的网络应用程序想象为连接全球用户的桥梁。为了为所有人创造热情且用户友好的体验，必须使用他们的语言进行交流。国际化 (i18n) 是让您的应用适应各种语言和地区的关键。 Angular 提供了强大的工具和功能来帮助您实现这一目标。

设置新的 Angular 项目

在我们开始 i18n 之旅之前，让我们创建一个新的 Angular 项目。

ng new i18n-app

您可以使用以下命令通过 Angular CLI 开始一个新的 Angular 项目。在设置过程中，您可以配置项目，包括启用 Angular 路由和选择样式表格式（例如 CSS、SCSS）等选项。确保选择符合您的项目要求的设置。

安装和配置 Angular 的 i18n 工具

1. 为了开启我们的 i18n 之旅，我们需要合适的工具。我们将安装并设置 Angular 的 i18n 工具以使我们的应用程序支持多语言。

npm install @ngx-translate/core --save

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

1. 安装 ngx-translate 后，我们可以将其导入到我们的 Angular 模块或 Config 中并设置翻译服务：

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';

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

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

如果您使用app.config文件，只需将NgModule替换为以下代码：

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 { ApplicationConfig, importProvidersFrom } from '@angular/core';

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

export const appConfig: ApplicationConfig = {
    providers: [
        importProvidersFrom([
            BrowserModule,
            HttpClientModule,
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient],
                },
            }),
        ])
    ]
}

在此代码中，我们导入必要的 ngx-translate 模块并使用 HttpLoaderFactory 函数配置翻译加载器。 HttpLoaderFactory 函数使用 HttpClient 模块从服务器异步加载翻译文件。

创建翻译文件

翻译服务设置完毕后，我们可以为我们想要支持的每种语言创建翻译文件。翻译文件是将键映射到翻译字符串的 JSON 文件。

创建以必要的语言代码作为名称的文件，并向其中添加翻译。

例如，这是一个英文翻译文件：

{
  "title": "My App",
  "greeting": "Hello, {{name}}!"
}

这是一个德语翻译文件：

{
  "title": "My App",
  "greeting": "Hello, {{name}}!"
}

这是文件夹结构和文件名称。

注意： 翻译文件使用相同的键，但每种语言具有不同的值。这简化了我们应用程序中语言之间的切换，而无需修改代码。

在模板中使用翻译

翻译文件准备就绪后，我们现在可以将它们集成到我们的 Angular 模板中。第一步是将翻译服务注入到我们的组件中：

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(private translate: TranslateService) {
    // Set the default language
    translate.setDefaultLang('EN');
  }

  translateLanguage(lang: string) {
    // Set the current language
    this.translate.use(lang);
  }
}

在此代码中，我们将 TranslateService 注入到我们的组件中，并将英语设置为默认语言。我们还定义了一个translateLanguage方法，允许我们更改应用程序的语言。

创建语言翻译组件

ng g c LanguageTranslation

创建组件后，我们可以利用翻译服务进行多种语言之间的翻译。

LanguageTranslation.component.ts

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

@Component({
  selector: 'app-language-translator'
})

export class LanguageTranslationComponent {
constructor(private translate: TranslateService) {}

TranslateToEnglish() {
  this.translate.use('En');
}

TranslateToGerman() {
  this.translate.use('DE');
 }
}

LanguageTranslation.component.html

{{ "title" | translate }}


    English
    German

在此代码中，我们创建一个 LanguageTranslationComponent，它注入 TranslateService 并提供两个按钮来在英语和德语之间切换。单击按钮时，我们会使用适当的语言代码调用 TranslateService 上的 translateLanguage 方法。

注意： 使用 this.translate.use(‘DE’) 时，请确保使用正确的语言代码，因为它区分大小写，并确保文件名准确。

结论：

国际化是现代软件开发的关键要素，Angular 提供了用于创建多语言应用程序的强大工具。借助 ngx-translate 库，在 Angular 中实现 i18n 变得更简单、适应性更强。

在本文中，我们介绍了如何使用 ngx-translate 生成翻译文件、在模板中应用翻译以及在 Angular 应用程序中切换语言。通过遵循这些指南，您可以轻松构建可供全球用户访问的多语言应用程序。

谢谢你！

有任何问题欢迎留言