Angular Academy · Pelajaran

Menandakan Teks untuk Terjemahan

Gunakan atribut i18n untuk menandakan teks yang boleh diterjemah.

Pelajaran 1 daripada 413 langkah

Menandakan Teks untuk Terjemahan ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Penyelesaian Pengantarabangsaan

Pengantarabangsaan (i18n) ialah proses menyediakan aplikasi anda supaya teksnya boleh diterjemahkan ke bahasa lain tanpa mengubah kod. Angular mempunyai sistem i18n terbina dalam yang berasaskan penandaan teks boleh terjemah dalam templat menggunakan atribut i18n.

Atribut i18n

Tambahkan atribut i18n pada mana-mana elemen yang teksnya perlu diterjemahkan. Angular mengumpulkan teks ini pada masa binaan dan menggantikan kandungannya mengikut locale.

<h1 i18n>Welcome to our store</h1>
<p i18n>Choose a product to begin.</p>

Menterjemahkan Atribut

Untuk menterjemahkan atribut HTML seperti title atau placeholder, awalkannya dengan i18n-.

<input placeholder="Search" i18n-placeholder />
<img src="logo.png" alt="Company logo" i18n-alt />

Maksud dan Perihalan

Anda boleh memberikan konteks kepada penterjemah dengan sintaks i18n="meaning|description". Maksud mengumpulkan frasa seiras yang sepatutnya berkongsi satu terjemahan; perihalan menerangkan penggunaannya.

<button i18n="cta|The main call to action on the home page">Get started</button>

ID Tersuai

Tambahkan ID tersuai yang stabil selepas @@ supaya terjemahan kekal apabila teks diedit. Tanpanya, perubahan pada teks sumber akan menghasilkan ID baharu dan menyebabkan terjemahan sedia ada hilang.

<h1 i18n="@@homeTitle">Welcome to our store</h1>

Interpolasi dalam Teks Terjemahan

Pengikatan dalam teks terjemahan menjadi ruang letak. Penterjemah melihat token bernama yang boleh dialihkan mengikut susunan bahasa mereka.

<p i18n>Hello, {{ name }}! You have {{ count }} new messages.</p>

Menandakan Teks dalam Komponen dengan $localize

Untuk rentetan dalam TypeScript, bukan templat, tandakannya dengan $localize. Ini menandakan rentetan untuk diekstrak seperti atribut i18n menandakan teks dalam templat.

const greeting = $localize('Welcome back'); // tagged-template form, marked for extraction

Mengapa Tidak Hanya Menggabungkan Rentetan

Menetapkan dan menggabungkan teks secara keras ('You have ' + n + ' items') merosakkan terjemahan: susunan perkataan berbeza mengikut bahasa dan peraturan jamak juga berbeza. Menandakan keseluruhan frasa dengan i18n mengekalkan tatabahasa untuk penterjemah.

Menterjemahkan Penanda Bersarang

Apabila teks boleh terjemah mengandungi elemen anak, Angular mengekalkannya sebagai ruang letak supaya penterjemah tidak terpadam penanda itu secara tidak sengaja.

<p i18n>Read our <a href="/terms">terms of service</a> before continuing.</p>

Mengekalkan Teks Sumber yang Kemas

Tandakan teks pada unit munasabah yang paling kecil, biasanya satu ayat penuh atau label. Elakkan memecahkan satu ayat merentas beberapa blok i18n, kerana setiap pecahan menjadi rentetan berasingan yang lebih sukar diterjemahkan.

Perkara yang Berlaku pada Masa Binaan

Atribut i18n itu sendiri tidak menimbulkan kos masa jalan: Angular menggantikan teks yang ditandakan semasa kompilasi untuk setiap locale, lalu menghasilkan himpunan teroptimum yang berasingan. Kita akan mengekstrak dan menterjemahkan rentetan ini dalam pelajaran seterusnya.

Semakan Pantas

Bagaimanakah anda menterjemahkan atribut ruang letak?

Imbas Kembali

Tandakan teks templat dengan atribut i18n dan atribut dengan i18n-attr. Tambahkan meaning|description untuk konteks dan @@customId untuk ID yang stabil. Pengikatan menjadi ruang letak, manakala rentetan TypeScript menggunakan $localize. Penandaan tidak menimbulkan sebarang kos masa jalan.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
38
Pelajaran
144

Soalan Lazim

Adakah pelajaran “Menandakan Teks untuk Terjemahan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Menandakan Teks untuk Terjemahan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menandakan Teks untuk Terjemahan”?

Gunakan atribut i18n untuk menandakan teks yang boleh diterjemah. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Menandakan Teks untuk Terjemahan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Menandakan Teks untuk Terjemahan
  2. Mengekstrak dan Menterjemah Mesej
  3. Jamak dan Select (ICU)
  4. Membina Himpunan Terlokal
← Kembali ke Angular Academy