Documentazione

Il t pipe

Non tutto può essere racchiuso in un componente. Attributi come placeholder o title richiedono una stringa e a volte è necessaria una traduzione nel codice TypeScript. Per questi, usa il metodo t pipe o translate del servizio MagicTranslate.

Il 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 restituisce il testo originale fino al caricamento della traduzione. Come il componente <t>, accetta la lingua e la formalità come opzioni:

<input [placeholder]="'Your name' | t: { lang: 'fr', formality: 'formal' }" />

Ci vuole anche un id, per modificare questo uso del testo da solo:

<button [title]="'Save' | t: { id: 'checkout-save' }"></button>

Variabili

Passa valori che non devono essere tradotti in v e fai riferimento ad essi come $name, lo stesso del componente <t>:

<input [placeholder]="'Search $count products' | t: { v: { count: products.length } }" />


<img [alt]="'Photo of $name' | t: { v: { name: user.name } }" [src]="user.photo" />

Il testo viene tradotto una volta come Search {0} products e la traduzione memorizzata nella cache viene riutilizzata quando count cambia.

Tradurre in codice

Per tradurre una stringa in TypeScript, chiama translate sul servizio MagicTranslate. Restituisce una promessa.

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 options
const formal = await magicTranslate.translate('How are you?', {
  lang: 'fr',
  formality: 'formal'
});

Senza l'opzione lang, il testo viene tradotto nella lingua corrente.

translate accetta anche delle variabili:

const message = await magicTranslate.translate('Your order $id has shipped', {
  v: { id: order.id }
});
PrecedenteIl componente <t>ProssimoPrerendering