ال t pipe
لا يمكن تغليف كل شيء في مكون. تأخذ السمات مثل placeholder أو title سلسلة، وأحيانًا تحتاج إلى ترجمة في شفرة TypeScript الخاصة بك. بالنسبة لهؤلاء، استخدم t pipe أو أسلوب translate لخدمة 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 بإرجاع النص الأصلي حتى يتم تحميل الترجمة. مثل مكون <t>، فإنه يأخذ اللغة والشكليات كخيارات:
<input [placeholder]="'Your name' | t: { lang: 'fr', formality: 'formal' }" />
يتطلب الأمر أيضًا id لتحرير هذا الاستخدام للنص بمفرده:
<button [title]="'Save' | t: { id: 'checkout-save' }"></button>
المتغيرات
قم بتمرير القيم التي لا يجب ترجمتها في v، وقم بالإشارة إليها كـ $name، كما هو الحال مع مكون <t>:
<input [placeholder]="'Search $count products' | t: { v: { count: products.length } }" /><img [alt]="'Photo of $name' | t: { v: { name: user.name } }" [src]="user.photo" />
تتم ترجمة النص مرة واحدة باسم Search {0} products، ويتم إعادة استخدام الترجمة المخزنة مؤقتًا عند تغيير count.
الترجمة في الكود
لترجمة سلسلة في TypeScript، اتصل بـ translate على خدمة MagicTranslate. إنها تعيد الوعد.
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'});
بدون خيار lang، تتم ترجمة النص إلى اللغة الحالية.
translate يأخذ المتغيرات أيضًا:
const message = await magicTranslate.translate('Your order $id has shipped', {v: { id: order.id }});