Petunjuk langkah demi langkah praktis tentang cara mempercepat lokalisasi dinamis (kemampuan untuk memilih bahasa) dalam aplikasi web Angular 4+ menggunakan @ ngx-translate / core .
Pada prinsipnya, Anda dapat menemukan publikasi tentang topik yang sama, dokumentasi perpustakaan ini mungkin cukup, tetapi saya ingin mensistematisasikan instruksi ini untuk aplikasi yang lebih nyaman. Bookmark semacam itu ada di celengan pengembang Angular pemula. Di akhir artikel ada tautan ke repositori terbuka dengan contoh.
Kenapa tepatnya ngx-terjemahkan
Saya ingin segera memesan, ini adalah instruksi untuk menggunakan perpustakaan tertentu. Kami tidak akan berbicara tentang alternatif, bahwa sudut memiliki lokalisasi i18n sendiri. Kalau saja karena dengan perubahan bahasa yang dinamis ada pertanyaan.
Apa yang kita dapatkan di pintu keluar
- Aplikasi sudut, dalam folder
assets/locale terdapat file *.json dengan kunci dan nilai-nilai lokalnya, satu file untuk setiap bahasa yang didukung dalam aplikasi web. - Perubahan bahasa dinamis
- Menyimpan kunci dalam struktur objek, yaitu, memiliki sesuatu seperti ini:
// en.json { Common: { Yes: "Yes" } }
Ini akan memungkinkan Anda untuk mengelompokkan kunci / nilai dan entah bagaimana mengatur file json dengan pelokalan. Untuk proyek besar itu cukup berguna.
- Otomatisasi minimal dan pengecekan orang bodoh. Bagaimana jika Anda lupa menambahkan kunci di json?
- Aplikasi pelokalan baik dalam template html dan kode ts
Sesuaikan
Kami membuat atau mengambil proyek sudut siap. Versi sudutnya adalah 4+, tetapi tentu saja lebih baik sesegar mungkin.
Instal perpustakaan yang diperlukan:
npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save @biesbjerg/ngx-translate-extract --saveDev
@ngx-translate/http-loader diperlukan agar kita dapat membaca data lokalisasi dari file *.json . Anda dapat hidup tanpanya, tetapi kemudian Anda harus menulis penyimpanan dan pemuatan data pelokalan sepenuhnya secara independen. Pendekatan ini cocok untuk mereka yang memiliki data pelokalan (atau hanya semua teks yang diterjemahkan) yang sudah disimpan di suatu tempat.
@biesbjerg/ngx-translate-extract adalah opsional, tetapi sangat bermanfaat. Ini memungkinkan Anda untuk mengumpulkan kunci pelokalan yang dilupakan oleh kode aplikasi dan memperbarui file pelokalan. Menggunakannya sangat mudah untuk memproses skenario seperti itu: tambahkan bahasa baru dan jalankan perintah dari perpustakaan ini. Akibatnya, file kosong untuk bahasa baru akan diisi dengan seluruh struktur tombol dan beberapa nilai default. Contohnya akan di bawah.
- Impor perpustakaan di modul utama:
@NgModule({ imports: [ TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient], }, useDefaultLang: false, }) ], }) export class AppModule { }
HttpLoaderFactory hadir dalam HttpLoaderFactory pustaka, dapat dijelaskan secara langsung dalam file yang sama, ukurannya sederhana.
export function HttpLoaderFactory(http: HttpClient): TranslateLoader { return new TranslateHttpLoader(http, './assets/locale/', '.json'); }
Di sinilah kami menunjukkan jalur ke file pelokalan. Jika mereka disimpan entah bagaimana secara terpisah, atau bahkan berbeda di lingkungan yang berbeda - ubah kode ini untuk menggunakan environment.ts misalnya.
- Pada prinsipnya, ini sudah cukup untuk pengaturan dasar, tetapi kami akan mengambil langkah - kesalahan tambahan saat kunci tidak ditemukan.
Untuk melakukan ini, tambahkan satu bidang lagi ke konfigurasi (segera setelah menentukan pemuat):
missingTranslationHandler: { provide: MissingTranslationHandler, useClass: MissingTranslationService },
Dan tentu saja, Anda perlu membuat implementasi dari penangan ini dalam file terpisah:
export class MissingTranslationService implements MissingTranslationHandler { handle(params: MissingTranslationHandlerParams) { return `WARN: '${params.key}' is missing in '${params.translateService.currentLang}' locale`; } }
- Tambahkan penyimpanan bahasa yang tersedia. Dalam kasus sederhana, lebih mudah untuk menempatkan mereka di
environment.ts
locales: ['en', 'ru'], defaultLocale: 'en',
- Agar layanan mulai bekerja, itu harus diinisialisasi dalam file AppComponent saat memuat aplikasi:
@Component({...}) export class AppComponent implements OnInit { constructor(private translateService: TranslateService) {} ngOnInit(): void { this.translateService.use(environment.defaultLocale); } }
- Tambahkan file
en.json dan ru.json (sesuai dengan apa yang ditunjukkan dalam daftar bahasa yang tersedia). Tambahkan beberapa bidang dasar sehingga valid json.
Ketika langkah-langkah ini diambil, layanan akan mulai bekerja.
Kami menggunakan layanan ini
Markup HTML
Semuanya sederhana di sini. Perpustakaan menawarkan translate pipa, kami hanya menerapkannya di markup untuk kunci tertentu.
<label>{{ 'LANGUAGES.TITLE' | translate }}</label>
Perhatikan bahwa saya menggunakan properti terlampir di sini, struktur json yang saya bicarakan di awal.
Parameter juga didukung, lihat mereka silakan di dokumentasi @ ngx-translate / core . Dengan menggunakan parameter, Anda dapat mengimplementasikan sesuatu seperti interpolasi string.
Dalam kode komponen
this.translateService.get(['KEY1', 'KEY2'])) .subscribe(translations => { console.log(translations['KEY1']) console.log(translations['KEY2']) });
Ini adalah cara yang andal jika Anda normal dengan Observable dan RxJs.
Jika tidak, ada caranya:
this.translateService.instant('Key')
Metode ini berfungsi dengan baik, tetapi pada tahap inisialisasi aplikasi (misalnya, ngOnInit AppComponent) data untuk itu mungkin belum dimuat. Berhati-hatilah.
Dukungan untuk file .json
Pada akhirnya, saya ingin menunjukkan cara menggunakan ngx-translate-extract . Jalankan saja perintah ngx-translate-extract -i ./src -o src/assets/locale/*.json --sort --format namespaced-json di konsol. Perintah ini akan memulai analisis file aplikasi, markup dan kode kode waktu. Semua kunci yang ditemukan di markup dan kode lainnya akan jatuh ke .json untuk semua bahasa, kunci yang ada dan nilainya tetap tidak tersentuh, kecuali bahwa urutannya dapat berubah.
Untuk kenyamanan, saya menambahkan ini sebagai skrip di package.json
"scripts": { "ng": "ng", "start": "ng serve", "update-locale": "ngx-translate-extract -i ./src -o src/assets/locale/*.json --sort --format namespaced-json" },
Segala sesuatu yang saya jelaskan dapat dirakit bersama dalam repositori terbuka: valentinkononov / ngx-translate-angular
Semoga materi ini bermanfaat! Tulis kode dengan senang hati, pilih perpustakaan yang nyaman dan buat proyek yang bermanfaat!