如何在AngularJS中利用ngx-translate實(shí)現(xiàn)i18n國(guó)際化

在 AngularJS 中，你可以使用 ngx-translate 這個(gè)第三方庫來實(shí)現(xiàn)國(guó)際化（i18n）。ngx-translate 是一個(gè)簡(jiǎn)單易用的翻譯庫，它可以幫助你輕松地為你的應(yīng)用添加多語言支持。以下是如何在 AngularJS 應(yīng)用中使用 ngx-translate 實(shí)現(xiàn) i18n 的步驟：

1. 安裝 ngx-translate：

   通過 npm 安裝 ngx-translate 和其所需的依賴項(xiàng)：

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

2. 配置 ngx-translate：

   在你的 AngularJS 應(yīng)用的模塊中，導(dǎo)入 TranslateModule 并將其添加到 imports 數(shù)組中。同時(shí)，配置 TranslateLoader 以使用 HTTP 請(qǐng)求加載翻譯文件。

   import { HttpClientModule, HttpClient } from '@angular/common/http';
   import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
   import { TranslateHttpLoader } from '@ngx-translate/http-loader';
   
   // 創(chuàng)建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. 準(zhǔn)備翻譯文件：

   在項(xiàng)目的 src/i18n/ 目錄下，為每個(gè)支持的語言創(chuàng)建一個(gè) JSON 文件。例如，為英語和中文創(chuàng)建兩個(gè)文件：

   • en.json:

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

   • zh.json:

     {
       "welcome": "歡迎使用我的應(yīng)用",
       "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. 切換語言：

   你可以在組件類中添加一個(gè)方法來切換當(dāng)前活動(dòng)的語言，并使用 translate.use() 方法更新當(dāng)前語言。

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

   在模板中，你可以使用事件綁定來調(diào)用這個(gè)方法，例如：

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

現(xiàn)在，你已經(jīng)成功地在 AngularJS 應(yīng)用中使用 ngx-translate 實(shí)現(xiàn)了 i18n 國(guó)際化。用戶可以通過點(diǎn)擊按鈕來切換不同的語言，應(yīng)用會(huì)根據(jù)當(dāng)前選擇的語言顯示相應(yīng)的翻譯文本。