如何在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 國際化。用戶可以通過點擊按鈕來切換不同的語言，應用會根據當前選擇的語言顯示相應的翻譯文本。