Angular 中的國際化 (i)-js教程-PHP中文網

Angular 中的國際化 (i)

WBOY

發布： 2024-08-14 17:16:41

原創

905 人瀏覽過

在當今廣闊的數位世界中，網頁開發人員的目標是與全球受眾建立聯繫。實現這一目標的關鍵策略是將您的 Angular 應用程式轉變為多語言體驗。歡迎使用國際化 (i18n)，您的應用程式可以使用使用者的母語與使用者進行交流，無論他們身在何處。在本部落格中，我們將深入研究如何將 i18n 整合到您的 Angular 專案中，確保您的應用程式可供全球各地的人們存取且用戶友好。

Angular 中的國際化 (i18n) 簡介

將您的網路應用程式想像為連接全球用戶的橋樑。為了為所有人創造熱情且用戶友好的體驗，必須使用他們的語言進行交流。國際化 (i18n) 是讓您的應用適應各種語言和地區的關鍵。 Angular 提供了強大的工具和功能來幫助您實現這一目標。

設定新的 Angular 項目

在開始我們的 i18n 之旅之前，讓我們先建立一個新的 Angular 專案。

ng new i18n-app

登入後複製

您可以使用以下命令透過 Angular CLI 開始一個新的 Angular 專案。在設定過程中，您可以設定項目，包括啟用 Angular 路由和選擇樣式表格式（例如 CSS、SCSS）等選項。確保選擇符合您專案要求的設定。

安裝並設定 Angular 的 i18n 工具

為了開啟我們的 i18n 之旅，我們需要合適的工具。我們將安裝並設定 Angular 的 i18n 工具以使我們的應用程式支援多語言。

npm install @ngx-translate/core --save

登入後複製

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

登入後複製

安裝 ngx-translate 後，我們可以將其匯入到我們的 Angular 模組或配置中並設定翻譯服務：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

登入後複製

如果您使用 app.config 文件，只需將 NgModule 替換為以下程式碼：

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { ApplicationConfig, importProvidersFrom } from '@angular/core';

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

export const appConfig: ApplicationConfig = {
    providers: [
        importProvidersFrom([
            BrowserModule,
            HttpClientModule,
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient],
                },
            }),
        ])
    ]
}

登入後複製

在此程式碼中，我們匯入必要的 ngx-translate 模組並使用 HttpLoaderFactory 函數配置翻譯載入器。 HttpLoaderFactory 函數使用 HttpClient 模組從伺服器非同步載入翻譯檔案。

建立翻譯檔案

設定翻譯服務後，我們可以為我們想要支援的每種語言建立翻譯檔案。翻譯檔案是將鍵映射到翻譯字串的 JSON 檔案。

建立以必要的語言程式碼作為名稱的文件，並為其新增翻譯。

例如，這是一個英文翻譯檔：

{
  "title": "My App",
  "greeting": "Hello, {{name}}!"
}

登入後複製

這是德文翻譯文件：

{
  "title": "Meine App",
  "greeting": "Hallo, {{name}}!"
}

登入後複製

這是資料夾結構和檔案名稱。

Internationalization (i) in Angular

注意： 翻譯檔案使用相同的鍵，但每種語言有不同的值。這簡化了應用程式中語言之間的切換，而無需修改程式碼。

在模板中使用翻譯

翻譯文件準備就緒後，我們現在可以將它們整合到我們的 Angular 模板中。第一步是將翻譯服務注入到我們的元件中：

App.component.ts :

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) {
    // Set the default language
    translate.setDefaultLang('EN');
  }

  translateLanguage(lang: string) {
    // Set the current language
    this.translate.use(lang);
  }
}

登入後複製

在此程式碼中，我們將 TranslateService 注入到我們的元件中，並將英文設定為預設語言。我們也定義了一個translateLanguage方法，讓我們可以更改應用程式的語言。

建立語言翻譯組件

ng g c LanguageTranslation

登入後複製

建立元件後，我們可以利用翻譯服務在多種語言之間進行翻譯。

LanguageTranslation.component.ts

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-language-translator'
})

export class LanguageTranslationComponent {
constructor(private translate: TranslateService) {}

TranslateToEnglish() {
  this.translate.use('En');
}

TranslateToGerman() {
  this.translate.use('DE');
 }
}

登入後複製

LanguageTranslation.component.html

<p>{{ "title" | translate }}</p>

<div>
    <button (click)="translateToEnglish()">English</button>
    <button (click)="translateToGerman()">German</button>
</div>

登入後複製

在此程式碼中，我們建立了一個 LanguageTranslationComponent，它注入 TranslateService 並提供兩個按鈕來在英文和德文之間切換。當我們點擊按鈕時，我們會使用適當的語言程式碼來呼叫 TranslateService 上的 translateLanguage 方法。

注意：使用 this.translate.use(‘DE’) 時，請確保使用正確的語言程式碼，因為它區分大小寫，並確保檔案名稱準確。