如何在AngularJS中利用ngx-translate实现i18n国际化

在 AngularJS 中，你可以使用 ngx-translate 这个第三方库来实现国际化（i18n）。ngx-translate 是一个简单易用的翻译库，它可以帮助你轻松地为你的应用添加多语言支持。以下是如何在 AngularJS 应用中使用 ngx-translate 实现 i18n 的步骤：

1. 安装 ngx-translate：

   通过 npm 安装 ngx-translate 和其所需的依赖项：

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

2. 配置 ngx-translate：

   在你的 AngularJS 应用的模块中，导入 TranslateModule 并将其添加到 imports 数组中。同时，配置 TranslateLoader 以使用 HTTP 请求加载翻译文件。

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

3. 准备翻译文件：

   在项目的 src/i18n/ 目录下，为每个支持的语言创建一个 JSON 文件。例如，为英语和中文创建两个文件：

   • en.json:

     {
       "welcome": "Welcome to My App",
       "hello": "Hello, {{name}}"
     }
     

   • zh.json:

     {
       "welcome": "欢迎使用我的应用",
       "hello": "你好，{{name}}"
     }
     

4. 使用 ngx-translate：

   在你的组件模板中，使用 translate 指令和 translate 过滤器来显示翻译后的文本。首先，在你的组件类中注入 TranslateService。

   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) {
       translate.setDefaultLang('en');
       translate.use('en');
     }
   }
   

   然后，在组件模板中使用 translate 指令和 translate 过滤器：

   <h1 translate>Welcome</h1>
   <p translate>Hello, {{name}}!</p>
   

5. 切换语言：

   你可以在组件类中添加一个方法来切换当前活动的语言，并使用 translate.use() 方法更新当前语言。

   switchLanguage(language: string) {
     this.translate.use(language);
   }
   

   在模板中，你可以使用事件绑定来调用这个方法，例如：

   <button (click)="switchLanguage('en')">English</button>
   <button (click)="switchLanguage('zh')">中文</button>
   

现在，你已经成功地在 AngularJS 应用中使用 ngx-translate 实现了 i18n 国际化。用户可以通过点击按钮来切换不同的语言，应用会根据当前选择的语言显示相应的翻译文本。