Angular Academy · Pelajaran

Menandai Teks untuk Terjemahan

Gunakan atribut i18n untuk menandai teks yang dapat diterjemahkan.

Menandai Teks untuk Terjemahan adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Manfaat Internasionalisasi

Internationalization (i18n) adalah proses menyiapkan aplikasi agar teksnya dapat diterjemahkan ke bahasa lain tanpa mengubah kode. Angular memiliki sistem i18n bawaan yang bekerja dengan menandai teks yang dapat diterjemahkan dalam templat menggunakan atribut i18n.

Atribut i18n

Tambahkan atribut i18n ke elemen apa pun yang teksnya perlu diterjemahkan. Angular mengumpulkan teks tersebut saat build dan mengganti isinya sesuai lokal.

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

Menerjemahkan Atribut

Untuk menerjemahkan atribut HTML, seperti title atau placeholder, tambahkan awalan i18n- pada atribut tersebut.

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

Makna dan Deskripsi

Anda dapat memberikan konteks kepada penerjemah dengan sintaks i18n="meaning|description". Makna mengelompokkan frasa identik yang seharusnya menggunakan satu terjemahan, sedangkan deskripsi menjelaskan penggunaannya.

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

ID Kustom

Tambahkan ID kustom yang stabil setelah @@ agar terjemahan tetap bertahan saat teks diedit. Tanpa ID tersebut, perubahan pada teks sumber akan menghasilkan ID baru dan menghilangkan terjemahan yang sudah ada.

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

Interpolasi dalam Teks Terjemahan

Binding di dalam teks terjemahan menjadi placeholder. Penerjemah akan melihat token bernama yang dapat dipindahkan sesuai kebutuhan bahasanya.

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

Menandai Teks dalam Komponen dengan $localize

Untuk string dalam TypeScript (bukan templat), tandai string tersebut dengan $localize. Ini menandai string untuk diekstraksi, sama seperti atribut i18n pada templat.

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

Mengapa String Tidak Cukup Digabungkan Saja

Mengodekan teks secara langsung dan menggabungkannya ('You have ' + n + ' items') merusak terjemahan: urutan kata berbeda-beda dalam setiap bahasa dan aturan jamak juga beragam. Menandai seluruh frasa dengan i18n menjaga tata bahasa tetap utuh bagi penerjemah.

Menerjemahkan Markup Bertingkat

Saat teks yang dapat diterjemahkan berisi elemen anak, Angular mempertahankannya sebagai placeholder agar penerjemah tidak sengaja menghapus markup tersebut.

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

Menjaga Teks Sumber Tetap Rapi

Tandai teks pada unit terkecil yang masuk akal, biasanya satu kalimat lengkap atau label. Hindari memecah satu kalimat ke dalam beberapa blok i18n, karena setiap potongan akan menjadi string terpisah yang lebih sulit diterjemahkan.

Yang Terjadi Saat Build

Atribut i18n sendiri tidak menimbulkan biaya saat runtime: Angular mengganti teks yang ditandai selama kompilasi untuk setiap lokal dan menghasilkan bundel teroptimasi yang terpisah. Pada pelajaran berikutnya, kita akan mengekstrak dan menerjemahkan string tersebut.

Pemeriksaan Cepat

Bagaimana cara menerjemahkan atribut placeholder?

Ringkasan

Tandai teks templat dengan atribut i18n dan atribut HTML dengan i18n-attr. Tambahkan meaning|description untuk memberikan konteks dan @@customId untuk ID yang stabil. Binding menjadi placeholder, sedangkan string TypeScript menggunakan $localize. Penandaan ini tidak menimbulkan biaya runtime.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menandai Teks untuk Terjemahan” gratis?

Ya — teks lengkap “Menandai Teks untuk Terjemahan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menandai Teks untuk Terjemahan”?

Gunakan atribut i18n untuk menandai teks yang dapat diterjemahkan. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Menandai Teks untuk Terjemahan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy