Pengantarabangsaan (i) dalam Sudut

Dalam dunia digital yang meluas hari ini, pembangun web menyasarkan untuk berhubung dengan khalayak global. Strategi utama untuk mencapai matlamat ini ialah mengubah aplikasi Angular anda kepada pengalaman berbilang bahasa. Selamat datang ke Pengantarabangsaan (i18n), tempat apl anda boleh berkomunikasi dengan pengguna dalam bahasa ibunda mereka, tidak kira di mana mereka berada. Dalam blog ini, kami akan menyelidiki penyepaduan i18n ke dalam projek Angular anda, memastikan apl anda boleh diakses dan mesra pengguna untuk orang di seluruh dunia.

Pengenalan kepada Pengantarabangsaan (i18n) dalam Sudut

Bayangkan apl web anda sebagai jambatan yang menghubungkan pengguna dari seluruh dunia. Untuk mencipta pengalaman yang mesra dan mesra pengguna untuk semua, adalah penting untuk berkomunikasi dalam bahasa mereka. Pengantarabangsaan (i18n) ialah kunci untuk menjadikan apl anda boleh disesuaikan dengan pelbagai bahasa dan wilayah. Angular menawarkan alat dan ciri yang mantap untuk membantu anda mencapainya.

Menyediakan Projek Sudut Baharu

Sebelum kami memulakan perjalanan i18n kami, mari buat projek Angular baharu.

ng new i18n-app

Anda boleh menggunakan arahan berikut untuk memulakan projek Angular baharu menggunakan Angular CLI. Semasa proses persediaan, anda boleh mengkonfigurasi projek anda, termasuk pilihan seperti mendayakan penghalaan sudut dan memilih format helaian gaya (cth., CSS, SCSS). Pastikan anda memilih tetapan yang sepadan dengan keperluan projek anda.

Memasang dan Mengkonfigurasi Alat i18n Angular

1. Untuk memulakan perjalanan i18n kami, kami memerlukan alatan yang betul. Kami akan memasang dan menyediakan alatan i18n Angular untuk menjadikan apl kami berbilang bahasa.

npm install @ngx-translate/core --save

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

1. Setelah ngx-translate dipasang, kami boleh mengimportnya ke dalam modul Angular atau Config kami dan menyediakan perkhidmatan terjemahan:

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 { }

Jika anda menggunakan fail app.config, cuma gantikan NgModule dengan kod berikut:

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],
                },
            }),
        ])
    ]
}

Dalam kod ini, kami mengimport modul terjemah ngx yang diperlukan dan mengkonfigurasi pemuat terjemahan menggunakan fungsi HttpLoaderFactory. Fungsi HttpLoaderFactory menggunakan modul HttpClient untuk memuatkan fail terjemahan secara tidak segerak daripada pelayan.

Membuat Fail Terjemahan

Setelah perkhidmatan terjemahan disediakan, kami boleh membuat fail terjemahan untuk setiap bahasa yang kami mahu sokong. Fail terjemahan ialah fail JSON yang memetakan kunci kepada rentetan yang diterjemahkan.

Buat fail dengan kod bahasa yang diperlukan sebagai nama dan tambah terjemahan padanya.

Sebagai contoh, berikut ialah fail terjemahan bahasa Inggeris:

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

Dan berikut ialah fail terjemahan bahasa Jerman:

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

Berikut ialah struktur folder dan nama fail.

Nota: Fail terjemahan menggunakan kekunci yang sama tetapi dengan nilai yang berbeza untuk setiap bahasa. Ini memudahkan pertukaran antara bahasa dalam aplikasi kami tanpa mengubah suai kod.

Menggunakan Terjemahan dalam Templat

Dengan fail terjemahan kami sedia, kami kini boleh menyepadukannya ke dalam templat Sudut kami. Langkah pertama ialah menyuntik perkhidmatan terjemahan ke dalam komponen kami:

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);
  }
}

Dalam kod ini, kami menyuntik TranslateService ke dalam komponen kami dan menetapkan bahasa Inggeris sebagai bahasa lalai. Kami juga mentakrifkan kaedah translateLanguage yang membolehkan kami menukar bahasa aplikasi.

Buat komponen Untuk Terjemahan Bahasa

ng g c LanguageTranslation

Selepas mencipta komponen, kami boleh menggunakan Perkhidmatan Terjemahan untuk menterjemah antara berbilang bahasa.

Bahasa Terjemahan.komponen.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');
 }
}

Bahasa Terjemahan.komponen.html

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

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

Dalam kod ini, kami mencipta LanguageTranslationComponent yang menyuntik TranslateService dan menyediakan dua butang untuk bertukar antara bahasa Inggeris dan Jerman. Apabila butang diklik, kami memanggil kaedah translateLanguage pada TranslateService dengan kod bahasa yang sesuai.

Nota: Apabila menggunakan this.translate.use(‘DE’), pastikan anda menggunakan kod bahasa yang betul kerana ia sensitif huruf besar dan pastikan nama fail adalah tepat.

Kesimpulan:

Pengantarabangsaan ialah elemen utama pembangunan perisian moden dan Angular menawarkan alat yang mantap untuk mencipta aplikasi berbilang bahasa. Dengan perpustakaan terjemahan ngx, melaksanakan i18n dalam Angular menjadi lebih mudah dan lebih mudah disesuaikan.

Dalam artikel ini, kami telah membincangkan cara menggunakan ngx-translate untuk menjana fail terjemahan, menggunakan terjemahan dalam templat dan menukar bahasa dalam aplikasi Angular. Dengan mengikuti garis panduan ini, anda boleh dengan mudah membina apl berbilang bahasa yang boleh diakses oleh pengguna di seluruh dunia.

Vielen Dank!

Wenn Sie Fragen haben, können Sie gerne Kommentare hinterlassen

Atas ialah kandungan terperinci Pengantarabangsaan (i) dalam Sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!