Documenti / Angular

i18n di Angular con ngx-translate, automatizzato

Sposta il testo hardcoded nei template Angular nella pipe ngx-translate, con gestione di control flow, binding e attributi aria, per app standalone e NgModule, incluse le versioni precedenti di Angular.

Come funziona

I template (.html file e inline template:) diventano {{ 'key' | translate }}, gli attributi [placeholder]="'key' | translate" ([attr.aria-label] per aria) e le stringhe nei binding ('key' | translate).

I template vengono analizzati dal compilatore di Angular, quindi @if, @for, *ngIf e i template inline vengono compresi. Gli elementi che utilizzano l'attributo i18n di Angular vengono lasciati a esso.

Una frase attorno a un link o testo in grassetto rimane un unico messaggio: un <i18n-t> generato lo renderizza, con ogni elemento in un <ng-template i18nSlot>. Prima di Angular 14 arriva come un I18nTModule.

I componenti dichiarati in un NgModule (qualsiasi componente prima di Angular 19 senza standalone: true) ottengono TranslateModule tramite il modulo che li dichiara.

ngx-translate non ha plurali, quindi {{ n }} {{ n === 1 ? 'order' : 'orders' }} sceglie la sua chiave con una pipe generata: ('orders.left_' + (n | pluralForm)) | translate: { count: n }, con _one, _few, _other... per lingua.

Prima e dopo

L'output effettivo del motore per questo file. In un'esecuzione reale, il modello ospitato nomina le chiavi dal contesto.

src/app/orders/orders.component.html · prima

<h1>Your orders</h1>
@if (orders.length) {
  <p>Hi {{ user.name }}, your orders are on their way.</p>
} @else {
  <p>No orders yet. Read the <a routerLink="/shipping">shipping options</a> first.</p>
}
<input placeholder="Search orders" aria-label="Search" />

src/app/orders/orders.component.html · dopo

<h1>{{ 'orders.your_orders' | translate }}</h1>
@if (orders.length) {
  <p>{{ 'orders.hi_your_orders_are_on' | translate: { name: user.name } }}</p>
} @else {
  <p><i18n-t key="orders.no_orders_yet_read_the"><ng-template i18nSlot="a"><a routerLink="/shipping">{{ 'orders.shipping_options' | translate }}</a></ng-template></i18n-t></p>
}
<input [placeholder]="'orders.search_orders' | translate" [attr.aria-label]="'orders.search' | translate" />

locales/en.json

{
  "orders": {
    "your_orders": "Your orders",
    "hi_your_orders_are_on": "Hi {{name}}, your orders are on their way.",
    "shipping_options": "shipping options",
    "no_orders_yet_read_the": "No orders yet. Read the {{a}} first.",
    "search_orders": "Search orders",
    "search": "Search"
  }
}

Cosa aggiunge la configurazione

La prima esecuzione imposta @ngx-translate/core se il progetto non lo ha ancora:

@ngx-translate/core, alla versione supportata dal tuo Angular
src/app/i18n.ts che include ogni locale (nessun caricatore HTTP)
provideI18n() in app.config.ts (un I18nModule in app.module.ts prima di Angular 16), e la pipe in ogni componente standalone o NgModule dichiarante

Eseguilo

La CLI richiede Node.js 22 o versioni successive.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

Oppure aggiungi la GitHub Action e ottieni una pull request a ogni push. Provalo prima sul tuo codice nel playground.