## 3.5国际化 (i18n) 与本地化 (l10n) ## 3.5 国际化 (i18n) 与本地化 (l10n) ### 3.5.1 理解国际化 (i18n) 与本地化 (l10n) 首先，让我们区分国际化(i18n)和本地化(l10n)这两个术语。 * **国际化 (i18n):** 指设计和开发应用程序，使其能够无需更改代码即可适应不同的语言和地区。它关注的是应用程序的架构和代码结构，使其具备本地化的能力。 * **本地化 (l10n):** 指将国际化的应用程序适配到特定的语言和地区。这包括翻译文本、调整日期和数字格式、以及处理其他特定于地区的设置。 简而言之，i18n是使应用程序“国际化就绪”的过程，而l10n是将应用程序调整到特定语言和文化的过程。 ```mermaid graph TD A[Application] --> B(Internationalization (i18n)); B --> C{Code Adaptability}; C --> D[No Code Changes for Localization]; A --> E(Localization (l10n)); E --> F{Specific Language/Region Adaption}; F --> G[Translation, Date/Number Formats, etc.]; ``` ### 3.5.2 Angular i18n 的核心概念 Angular的i18n实现依赖于以下几个核心概念： * **标记（Markers）:** 用于标记需要翻译的文本。通常使用 `i18n` 属性。 * **翻译文件:** 包含特定语言的翻译文本。Angular支持标准的XLIFF (XML Localization Interchange File Format) 文件格式，以及其他格式如JSON和Po。 * **Angular CLI:** 提供用于提取翻译文本、构建本地化版本的命令。 * **运行时本地化:** Angular可以通过运行时环境选择合适的翻译文件。 ### 3.5.3 代码实践：使用 Angular i18n 下面是一个逐步的示例，演示如何在Angular应用程序中使用i18n。 **1. 标记需要翻译的文本:** 在你的组件模板中，使用 `i18n` 属性标记需要翻译的文本。 ```html

Welcome to our application!

Submit ``` `i18n` 属性的值包含两个部分，用 `|` 分隔： * **Description (描述):** 提供关于文本用途的描述，帮助翻译人员更好地理解上下文。 * **Meaning (意义):** 可选，用于区分具有相同文本但不同含义的字符串。 **2. 提取翻译文本:** 使用 Angular CLI 提取标记的文本到翻译文件。 ```bash ng extract-i18n ``` 这将在项目的根目录下生成一个 `messages.xlf` 文件（默认名称）。该文件包含所有标记的文本，以及它们的描述和意义。 **3. 创建翻译文件:** 复制 `messages.xlf` 文件，并将其重命名为特定语言的文件，例如 `messages.fr.xlf` (法语)。然后，在 `messages.fr.xlf` 文件中，提供法语翻译。 ```xml Welcome to our application! Bienvenue dans notre application ! An introduction header Submit Soumettre The label of the submit button ``` **4. 配置 Angular 构建:** 在 `angular.json` 文件中，配置不同的本地化构建。 ```json { "projects": { "my-app": { "architect": { "build": { "configurations": { "fr": { "localize": ["fr"] } } }, "serve": { "configurations": { "fr": { "browserTarget": "my-app:build:fr" } } } }, "i18n": { "sourceLocale": "en-US", "locales": { "fr": "src/locale/messages.fr.xlf" } } } } } ``` * `i18n.sourceLocale`: 指定源语言的区域设置。 * `i18n.locales`: 定义语言环境及其对应的翻译文件。 * `build.configurations.fr.localize`: 指定要构建的语言环境。 * `serve.configurations.fr.browserTarget`: 指定开发服务器使用的构建目标。 **5. 构建和运行本地化版本:** 使用 Angular CLI 构建特定语言的版本。 ```bash ng build --configuration fr ``` 这将在 `dist/my-app/fr` 目录下生成法语版本的应用程序。 要运行法语版本的应用程序，可以使用以下命令： ```bash ng serve --configuration fr ``` **3.5.4 使用 `$localize` 模板字符串** 除了`i18n`属性，Angular 还引入了 `$localize` 模板字符串，它提供了一种更灵活的方式来处理国际化文本，尤其是在 TypeScript 代码中。 **示例：** ```typescript import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-my-component', template: `

{{ welcomeMessage }}

` }) export class MyComponent implements OnInit { welcomeMessage: string; ngOnInit(): void { this.welcomeMessage = $localize`:greeting|A friendly greeting:Hello, world!`; } } ``` 在这个例子中，`$localize` 模板字符串用于定义 `welcomeMessage` 的值。 `greeting` 是意义，`A friendly greeting` 是描述，`Hello, world!` 是默认的英文文本。 **提取和翻译 `$localize` 文本：** `ng extract-i18n` 命令同样可以提取 `$localize` 模板字符串中的文本，并将它们添加到 `messages.xlf` 文件中。 **3.5.5 处理日期、数字和货币格式** 不同的地区使用不同的日期、数字和货币格式。Angular 提供了 `DatePipe`、`NumberPipe` 和 `CurrencyPipe` 来处理这些格式。 **示例：** ```html

Today is: {{ today | date:'fullDate' }}

Price: {{ price | currency:'EUR' }}

Number: {{ number | number:'1.2-2' }}

``` 要根据用户的区域设置格式化日期、数字和货币，你需要设置应用程序的 `LOCALE_ID` 提供程序。 ```typescript import { LOCALE_ID, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [ { provide: LOCALE_ID, useValue: 'fr-FR' } // 设置为法语 (法国) ], bootstrap: [AppComponent] }) export class AppModule {} ``` **3.5.6 动态加载区域设置数据** 某些格式化选项（例如完整的日期格式）需要额外的区域设置数据。Angular 提供了一种动态加载这些数据的方法。 首先，你需要安装 `@angular/common/locales/fr` (或其他语言环境)。 ```bash npm install @angular/common/locales/fr ``` 然后，在你的应用程序中注册区域设置数据。 ```typescript import { registerLocaleData } from '@angular/common'; import localeFr from '@angular/common/locales/fr'; registerLocaleData(localeFr, 'fr'); ``` **3.5.7 运行时切换语言环境** 虽然可以在构建时本地化应用程序，但有时需要在运行时切换语言环境。这可以通过使用 `TranslateService` 或类似的库来实现。 1. **安装 TranslateService:** 使用 `ngx-translate` 或其他类似的库。 ```bash npm install @ngx-translate/core @ngx-translate/http-loader --save ``` 2. **配置 TranslateModule:** 在 `app.module.ts` 中配置 `TranslateModule`。 ```typescript 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, './assets/i18n/', '.json'); } @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` 3. **创建翻译文件 (JSON):** 在 `src/assets/i18n` 目录下创建 JSON 格式的翻译文件，例如 `en.json` 和 `fr.json`。 ```json // en.json { "WELCOME": "Welcome to our application!" } // fr.json { "WELCOME": "Bienvenue dans notre application !" } ``` 4. **在组件中使用 TranslateService:** ```typescript import { Component } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-root', template: `

{{ 'WELCOME' | translate }}

English French ` }) export class AppComponent { constructor(private translate: TranslateService) { translate.setDefaultLang('en'); translate.use('en'); } switchLanguage(language: string) { this.translate.use(language); } } ``` **3.5.8 最佳实践** * **尽早规划 i18n:** 在项目开始时就考虑 i18n，可以避免以后进行大规模重构。 * **使用清晰的描述:** 为翻译文本提供清晰的描述，帮助翻译人员理解上下文。 * **保持一致性:** 在整个应用程序中使用一致的术语和风格。 * **测试本地化版本:** 确保本地化版本在不同的语言和地区都能正常工作。 * **使用外部翻译服务:** 对于大型项目，考虑使用专业的翻译服务。 ### 3.5.9 总结 Angular 提供了强大的工具和机制来支持 i18n 和 l10n。通过使用 `i18n` 属性、`$localize` 模板字符串、翻译文件、区域设置数据和 `TranslateService`，你可以构建能够适应不同语言和文化的应用程序。记住，尽早规划 i18n，并遵循最佳实践，可以确保你的应用程序在全球范围内取得成功。通过仔细的规划和实施，你可以创建一个真正全球化的应用程序，为用户提供最佳的体验。