Angular i18n：多语言国际化实战-JavaScript中文网-JavaScript教程资源分享门户

在开发 Web 应用程序时，多语言的国际化是必不可少的。在 Angular 框架中，i18n 是一个非常有用的工具，可以帮助我们轻松地实现多语言支持。在本文中，我们将学习如何在 Angular 应用程序中使用 i18n。

什么是 i18n？

i18n 是“国际化”的缩写，其中的 “18” 代表了 “i” 与“n” 之间的 18 个中间字符。

i18n 的目的是使应用程序能够轻松地应对多语言需求。使用 i18n，我们可以设计应用程序的界面和内容，使它们适用于不同的语言、地区和文化。

Angular 中的 i18n

在 Angular 应用程序中，我们可以使用 i18n 指令来定义文本，并在运行时将其翻译成不同的语言。

以下是一个例子：

<h1 i18n="An introduction to {{ appName }}.">{{ appName }}：一份简介。</h1>

在这个例子中，我们使用 i18n 指令来定义标题文本，并将应用程序的名称插入到文本中。在运行时，Angular 将根据当前的语言和区域设置自动将文本翻译成不同的语言。

为了支持不同的语言，我们需要为每种语言创建一个翻译文件。这些翻译文件可以是 JSON 文件或 XLIFF 文件。然后，我们需要配置 Angular 来使用这些翻译文件。

以下是一个例子：

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

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

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

在这个例子中，我们使用 @ngx-translate/core 和 @ngx-translate/http-loader 包来加载和解析翻译文件。

我们提供了一个工厂函数来创建 TranslateHttpLoader，并将其传递给 TranslateModule.forRoot 方法。这个工厂函数使用 HttpClient 来加载翻译文件，并设置文件的位置和扩展名。

现在，我们可以在模板中使用翻译文本。以下是一个例子：

<h1>{{ 'INTRODUCTION' | translate }} {{ appName }}。</h1>

在这个例子中，我们使用 Angular 的管道功能来将翻译文本插入到模板中。我们传递了一个键值 “INTRODUCTION” 和应用程序的名称，这将在翻译文件中查找对应的值，并将其插入到模板中。

示例代码

为了更好地理解 Angular 中的 i18n，我们可以查看下面的代码示例。这个示例演示了如何在 Angular 应用程序中使用 i18n 来实现多语言支持。

首先，我们需要安装必要的依赖：

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

然后，我们可以创建一个翻译文件，例如 en.json：

{
  "INTRODUCTION": "An introduction to",
  "NAME": "Angular i18n",
  "TITLE": "{{ INTRODUCTION }} {{ NAME }}."
}

为了加载和解析这些翻译文件，我们需要在应用程序的模块中导入 TranslateModule 并进行配置。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';

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

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

在 AppComponent 中，我们可以实现国际化的文本。

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ 'TITLE' | translate }}</h1>
  `
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
    translate.use('en');
  }
}

在这个例子中，我们使用了 @ngx-translate/core 的 TranslateService 来设置默认语言并使用翻译文件中的文本。我们传递一个键值 “TITLE”，这将在翻译文件中查找对应的值，并将其插入到模板中。

最后一步是将我们的应用程序放在服务器上运行：

ng serve --open

现在，我们可以访问我们的应用程序并看到翻译后的文本。

总结

i18n 是实现多语言国际化的一种强大工具。在 Angular 应用程序中，我们可以使用 i18n 来设计应用程序的界面和内容，以适应不同的语言、地区和文化。

在本文中，我们学习了如何在 Angular 应用程序中使用 i18n，包括如何定义和加载翻译文件，以及如何在模板中使用翻译文本。

此外，我们还提供了一个示例代码，使您更好地了解如何在 Angular 应用程序中使用 i18n。

通过使用 Angular i18n，我们可以创建可扩展、灵活和易于维护的多语言 Web 应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/659e5258add4f0e0ff75135e

Angular i18n：多语言国际化实战

什么是 i18n？

Angular 中的 i18n

示例代码

总结

纠错反馈