t pipe
Tidak semuanya bisa dibungkus dalam komponen. Atribut seperti placeholder atau title mengambil string, dan terkadang Anda memerlukan terjemahan dalam kode TypeScript Anda. Untuk ini, gunakan metode t pipe atau translate dari layanan MagicTranslate.
t pipe
import { Component } from '@angular/core';import { TranslatePipe } from '@magic-translate/angular';@Component({selector: 'app-search',imports: [TranslatePipe],template: `<input [placeholder]="'Search products' | t" />`})export class Search {}
pipe mengembalikan teks asli sampai terjemahan telah dimuat. Seperti komponen <t>, ia mengambil bahasa dan formalitas sebagai opsi:
<input [placeholder]="'Your name' | t: { lang: 'fr', formality: 'formal' }" />
Dibutuhkan juga id, untuk mengedit penggunaan teks ini sendiri:
<button [title]="'Save' | t: { id: 'checkout-save' }"></button>
Variabel
Luluskan nilai yang tidak boleh diterjemahkan dalam v, dan referensikan sebagai $name, sama seperti dengan komponen <t>:
<input [placeholder]="'Search $count products' | t: { v: { count: products.length } }" /><img [alt]="'Photo of $name' | t: { v: { name: user.name } }" [src]="user.photo" />
Teks diterjemahkan sekali sebagai Search {0} products, dan terjemahan yang di-cache digunakan kembali ketika count berubah.
Menerjemahkan dalam kode
Untuk menerjemahkan string di TypeScript, panggil translate pada layanan MagicTranslate. Ia mengembalikan janji.
import { inject } from '@angular/core';import { MagicTranslate } from '@magic-translate/angular';const magicTranslate = inject(MagicTranslate);const message = await magicTranslate.translate('Your order has been placed');// with optionsconst formal = await magicTranslate.translate('How are you?', {lang: 'fr',formality: 'formal'});
Tanpa opsi lang, teks diterjemahkan ke dalam bahasa saat ini.
translate mengambil variabel juga:
const message = await magicTranslate.translate('Your order $id has shipped', {v: { id: order.id }});