الوثائق / Angular

التدويل في Angular باستخدام ngx-translate، تلقائي

نقل النص الثابت في قوالب Angular إلى أنبوب ngx-translate، مع معالجة تدفق التحكم، والارتباطات وسمات aria، للتطبيقات المستقلة وNgModule، بما في ذلك الإصدارات الأقدم من Angular.

كيف يعمل

القوالب (.html ملفات و template: مدمجة) تصبح {{ 'key' | translate }}، سمات [placeholder]="'key' | translate" ([attr.aria-label] ل aria)، وسلاسل النصوص في الارتباطات ('key' | translate).

يتم تحليل القوالب باستخدام المترجم الخاص بـ Angular، بحيث يتم فهم @if، @for، *ngIf والقوالب المدمجة. العناصر التي تستخدم سمة i18n الخاصة بـ Angular تترك لها.

جملة حول رابط أو نص غامق تبقى رسالة واحدة: يتم عرضها بواسطة <i18n-t>، مع كل عنصر في <ng-template i18nSlot>. قبل Angular 14 تأتي كـ I18nTModule.

المكونات المعلنة في NgModule (أي مكون قبل Angular 19 بدون standalone: true) تحصل على TranslateModule من خلال الوحدة التي تعلن عنها.

ngx-translate لا يدعم الجمع، لذا {{ n }} {{ n === 1 ? 'order' : 'orders' }} يختار مفتاحه باستخدام أنبوب مولد: ('orders.left_' + (n | pluralForm)) | translate: { count: n }، مع _one، _few، _other… لكل لغة.

قبل وبعد

المخرجات الحقيقية للمحرك لهذا الملف. في تشغيل حقيقي، يقوم النموذج المستضاف بتسمية المفاتيح من السياق.

src/app/orders/orders.component.html · قبل

<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 · بعد

<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"
  }
}

ما يضيفه الإعداد

الإعداد الأول يقوم بإعداد @ngx-translate/core إذا لم يكن المشروع يحتوي عليه بعد:

@ngx-translate/core، عند الإصدار الذي يدعمه Angular الخاص بك
تجميع src/app/i18n.ts لكل اللغات (بدون محمل HTTP)
provideI18n() في app.config.ts (وهو I18nModule في app.module.ts قبل Angular 16)، وأنبوب في كل مكون مستقل أو NgModule معلن

قم بتشغيله

يتطلب CLI إصدار Node.js 22 أو أحدث.

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

أو أضف إجراء GitHub واحصل على طلب سحب عند كل دفعة. جربه على الكود الخاص بك أولاً في ملعب.