Angular 6 - i18n 与 ngx-translate

JS

Angular 6 中的国际化与翻译：i18n 与 ngx-translate

Angular 6 提供了强大的国际化（i18n）支持，使开发者能够轻松地为应用程序添加多语言支持。同时，ngx-translate 这个库也为 Angular 提供了额外的翻译功能，让我们更便捷地管理和实现多语言功能。

实现国际化的基本步骤

首先，在 Angular 6 项目中启用国际化功能需要进行一些设置。在 angular.JSon 文件中，配置 i18n 相关的参数。举例来说，假设我们要支持英文和西班牙语：

JSon
"i18n": {
  "sourceLocale": "en",
  "locales": {
    "es": "src/locale/messages.es.xlf"
  }
}

接着，为你的组件和模板添加国际化支持。在模板中使用 i18n 指令标记需要翻译的文本：

html
<img src="https://img.izhida.com/topic/1e35bcba2dba1089c7bd0805d4517c8f.jpg" alt="typescript"><br>typescript
This is a paragraph to translate.

然后，运行以下命令提取标记的翻译文本并生成翻译文件：

bash
ng xi18n --output-path src/locale

使用 ngx-translate 进行翻译

ngx-translate 提供了更灵活的方式来处理翻译。首先，安装 ngx-translate/core 和 @ngx-translate/http-loader：

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

在 app.module.ts 中进行配置：

typescript
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}
@NgModule({
  imports: [
    // ...
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  // ...
})
export class AppModule { }

在组件中使用 ngx-translate 进行文本翻译：

typescript
import { TranslateService } from '@ngx-translate/core';
export class YourComponent {
  constructor(private translate: TranslateService) {
    this.translate.setDefaultLang('en'); // 设置默认语言
    this.translate.use('es'); // 切换到西班牙语
  }
  changeLanguage(lang: string) {
    this.translate.use(lang); // 动态改变语言
  }
}

通过 Angular 6 的内置 i18n 功能以及 ngx-translate 库，我们可以轻松地为应用程序添加多语言支持，并且灵活地管理翻译文本。这些工具使开发人员能够更广泛地吸引全球受众，提升应用的可用性和用户体验。