Documentation

Le composant <t>

Enveloppe ton contenu dans le composant <t> pour le traduire. Le contenu original est affiché jusqu'au chargement de la traduction.

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

Le texte avec reliures fonctionne également. Le contenu est traduit à nouveau chaque fois qu'il change, par exemple lorsque name change :

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

Pour les valeurs qui changent souvent, comme les noms et les chiffres, utilise plutôt des variables, afin que le texte ne soit traduit qu'une seule fois.

Toutes les traductions demandées en même temps sont envoyées à l'API en une seule demande, et les traductions sont mises en cache. Tu peux utiliser autant de composants <t> que tu le souhaites.

<mt-translate> fonctionne comme un sélecteur alternatif, et Translate est le même composant que T.

Entrées

SaisieTypeDescription
formality'informal' | 'formal'Définit la formalité de la traduction.
idstringTu peux modifier cette utilisation du texte de ta propre initiative. Il n'est pas défini comme id de l'élément.
langLanguageRemplace la langue définie par provideMagicTranslate.
vRecord<string, unknown>Valeurs qui ne sont pas traduites, référencées par $name dans le contenu. Voir Variables.
<t lang="fr" formality="formal">How are you?</t>

Variables

Transmet des valeurs qui changent, comme un nom ou un décompte, dans [v] et y fait référence sous la forme $name dans le contenu :

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

Magic Translate traduit le texte autour des valeurs une fois, par Hi {0}, you have {1} new messages, et les réintègre dans ton application. La traduction est mise en cache et fonctionne pour tous les noms et tous les comptes, et les valeurs elles-mêmes ne sont jamais envoyées à Magic Translate. Lorsque seules les valeurs changent, aucune nouvelle demande n'est faite.

Les valeurs sont numérotées dans l'ordre dans lequel elles apparaissent pour la première fois. La traduction peut les déplacer là où la langue en a besoin, par exemple {1} neue Nachrichten für {0}.

Le texte qui entoure les valeurs peut contenir du code HTML, et les valeurs peuvent d'abord être formatées avec pipes :

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

Quelques règles :

  • Seules les touches [v] sont remplacées, donc le texte tel que $5 reste tel quel. Si deux touches commencent de la même façon, par exemple count et counts, la plus longue gagne.
  • Le même nom peut apparaître plusieurs fois.
  • Les valeurs sont insérées sous forme de texte, jamais sous forme de code HTML. Mets du balisage dans le texte qui les entoure à la place : Hi <b>$name</b>.
  • Les variables sont remplacées uniquement dans le texte, pas dans les attributs tels que href ou title.
  • En mode développement, une touche qui n'apparaît pas dans le texte enregistre un avertissement, qui permet de détecter les fautes de frappe.
  • Avec le rendu côté serveur, un <t> avec [v] est vide sur le serveur et apparaît une fois que l'application est exécutée dans le navigateur.

Les variables utilisent $name au lieu de {name} car Angular lit un seul { dans un modèle au début d'un message ICU, mais le modèle ne se compile pas.

Limites

  1. Tu ne peux pas mettre de composants Angular dans le composant <t>. Les éléments HTML simples conviennent (voir l'exemple ci-dessous). Le balisage traduit passe par le filtre HTML de Angular.
  2. Le contenu d'un composant <t> ne peut pas dépasser 10 Ko, soit environ 5 000 caractères.
<!-- 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>

Pour traduire des attributs et d'autres chaînes, utilise le t pipe.

PrécédentAngularSuivantLe t pipe