Dokumentasi

Komponen <t>

Bungkus konten Anda di komponen <t> untuk menerjemahkannya. Konten asli ditampilkan sampai terjemahan dimuat.

<t>This content will be translated</t>

Teks dengan binding juga berfungsi. Konten diterjemahkan lagi setiap kali berubah, misalnya saat name berubah:

<t>Hello {{ name() }}</t>

Untuk nilai yang sering berubah, seperti nama dan jumlah, gunakan variabel sebagai gantinya, sehingga teks diterjemahkan hanya sekali.

Semua terjemahan yang diminta pada saat yang sama dikirim ke API dalam satu permintaan, dan terjemahan di-cache. Anda dapat menggunakan komponen <t> sebanyak yang Anda suka.

<mt-translate> berfungsi sebagai pemilih alternatif, dan Translate adalah komponen yang sama dengan T.

Masukan

MasukanMengetikDeskripsi
formality'informal' | 'formal'Menetapkan formalitas terjemahan.
idstringMemungkinkan Anda mengedit penggunaan teks ini sendiri. Itu tidak disetel sebagai elemen id.
langLanguageMengganti bahasa yang disetel dengan provideMagicTranslate.
vRecord<string, unknown>Nilai yang tidak diterjemahkan, direferensikan sebagai $name dalam konten. Lihat Variabel.
<t lang="fr" formality="formal">How are you?</t>

Variabel

Berikan nilai yang berubah, seperti nama atau hitungan, di [v] dan referensikan sebagai $name dalam konten:

<t [v]="{ name: user.name, count: unread() }">
  Hi $name, you have $count new messages
</t>

Magic Translate menerjemahkan teks di sekitar nilai satu kali, sebagai Hi {0}, you have {1} new messages, dan mengembalikan nilai ke aplikasi Anda. Terjemahan di-cache dan berfungsi untuk setiap nama dan setiap hitungan, dan nilai-nilai itu sendiri tidak pernah dikirim ke Magic Translate. Ketika hanya nilai yang berubah, tidak ada permintaan baru yang dibuat.

Nilai-nilai diberi nomor dalam urutan pertama kali muncul. Terjemahan dapat memindahkannya ke mana pun bahasa membutuhkannya, misalnya {1} neue Nachrichten fĂźr {0}.

Teks di sekitar nilai dapat berisi HTML, dan nilai-nilai dapat diformat dengan pipes terlebih dahulu:

<t [v]="{ count: cart.items.length, total: cart.total | currency }">
  You have <b>$count items</b> in your cart, totalling <b>$total</b>.
</t>

Beberapa aturan:

  • Hanya kunci [v] yang diganti, jadi teks seperti $5 tetap apa adanya. Jika dua tombol dimulai dengan cara yang sama, seperti count dan counts, yang terpanjang menang.
  • Nama yang sama dapat muncul lebih dari sekali.
  • Nilai dimasukkan sebagai teks, tidak pernah sebagai HTML. Letakkan markup di teks di sekitarnya sebagai gantinya: Hi <b>$name</b>.
  • Variabel diganti hanya dalam teks, bukan dalam atribut seperti href atau title.
  • Dalam mode pengembangan, kunci yang tidak muncul dalam teks mencatat peringatan, yang menangkap kesalahan ketik.
  • Dengan rendering sisi server, <t> dengan [v] dirender kosong di server dan muncul setelah aplikasi berjalan di browser.

Variabel menggunakan $name daripada {name} karena Angular membaca satu { dalam template sebagai awal pesan ICU, dan template tidak dikompilasi.

Keterbatasan

  1. Anda tidak dapat menempatkan komponen Angular di dalam komponen <t>. Elemen HTML biasa baik-baik saja (lihat contoh di bawah). Markup yang diterjemahkan melalui pembersih HTML Angular.
  2. Konten di dalam komponen <t> tidak boleh melebihi 10 KB, yaitu sekitar 5.000 karakter.
<!-- this is OK, since <a> is a plain HTML element -->
<t>
  <a href="mailto:info@i42.ch">Please send us an email</a>
</t>


<!-- this does NOT work, since <app-button> is an Angular component -->
<t>
  <app-button>Click me</app-button>
</t>

Untuk menerjemahkan atribut dan string lainnya, gunakan t pipe.

SebelumnyaAngularBerikutnyat pipe