Angular 6 i18n 运行时翻译支持

typescript

## Angular 6 i18n 运行时翻译支持

Angular 6 引入了国际化（i18n）的运行时翻译支持，使得在应用程序中轻松实现多语言支持变得更加容易。通过这项功能，开发者可以在运行时动态切换语言，而不需要重新编译整个应用程序。这为构建全球化的应用提供了方便且灵活的解决方案。

为什么选择 Angular 6 i18n 运行时翻译？

在开发多语言应用时，传统的方式是在编译时为每种语言生成一个构建版本，这导致了维护成本的上升。Angular 6的运行时翻译支持改变了这一情景，使得应用程序可以在运行时动态加载翻译文件，而无需重新构建。这为开发者提供了更大的灵活性，让他们能够快速响应用户的语言切换请求。

实现 Angular 6 i18n 运行时翻译的步骤

1. 配置 Angular 应用

在 Angular 应用的根模块中，需要添加 TranslateModule 和相关的配置。这通常包括定义支持的语言列表和设置默认语言。

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

2. 创建翻译文件

在应用的 assets 文件夹下创建翻译文件，命名规则为 {language-code}.JSon，例如 en.JSon 和 fr.JSon。

JSon
   // en.JSon
   {
     "greeting": "Hello, World!",
     "farewell": "Goodbye!"
   }
   

JSon
   // fr.JSon
   {
     "greeting": "Bonjour le monde!",
     "farewell": "Au revoir!"
   }
   

3. 在组件中使用翻译服务

在需要翻译的组件中，注入 TranslateService 并使用其方法来获取翻译文本。

typescript
   import { Component } from '@angular/core';
   import { TranslateService } from '@ngx-translate/core';
   @Component({
     selector: 'app-root',
     template: <code>
       <h1>{{ 'greeting' | translate }}</h1>
       
{{ 'farewell' | translate }}
     </code>
   })
   export class MyComponent {
     constructor(private translate: TranslateService) {
       // 设置默认语言
       translate.setDefaultLang('en');
     }
     switchLanguage(language: string) {
       // 切换语言
       this.translate.use(language);
     }
   }
   

Angular 6 的 i18n 运行时翻译支持为构建全球化应用提供了强大的工具。通过动态加载翻译文件，开发者可以更灵活地处理多语言需求，为用户提供更好的体验。使用这一功能，可以轻松实现语言切换，而无需重新编译整个应用。这为开发者提供了更多的自由度，同时降低了维护成本。