المكون <t>

قم بتغليف المحتوى الخاص بك في مكون <t> لترجمته. يتم عرض المحتوى الأصلي حتى يتم تحميل الترجمة.

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

يعمل النص مع الارتباطات أيضًا. تتم ترجمة المحتوى مرة أخرى كلما تغير، على سبيل المثال عندما يتغير name:

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

بالنسبة للقيم التي تتغير كثيرًا، مثل الأسماء والأعداد، استخدم المتغيرات بدلاً من ذلك، بحيث تتم ترجمة النص مرة واحدة فقط.

يتم إرسال جميع الترجمات المطلوبة في نفس الوقت إلى API في طلب واحد، ويتم تخزين الترجمات مؤقتًا. يمكنك استخدام العديد من مكونات <t> كما تريد.

يعمل <mt-translate> كمحدد بديل، و Translate هو نفس المكون مثل T.

المدخلات

<t lang="fr" formality="formal">How are you?</t>

المتغيرات

قم بتمرير القيم التي تتغير، مثل الاسم أو العدد، في [v] والإشارة إليها كـ $name في المحتوى:

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

يقوم Magic Translate بترجمة النص حول القيم مرة واحدة، كـ Hi {0}, you have {1} new messages، ويعيد القيم إلى تطبيقك. يتم تخزين الترجمة مؤقتًا وتعمل مع كل اسم وكل عدد، ولا يتم إرسال القيم نفسها أبدًا إلى Magic Translate. عندما تتغير القيم فقط، لا يتم تقديم طلب جديد.

يتم ترقيم القيم بالترتيب الذي تظهر به لأول مرة. يمكن للترجمة نقلها أينما تحتاجها اللغة، على سبيل المثال {1} neue Nachrichten für {0}.

يمكن أن يحتوي النص حول القيم على HTML، ويمكن تنسيق القيم باستخدام 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>

بعض القواعد:

• يتم استبدال مفاتيح [v] فقط، لذلك يبقى النص مثل $5 كما هو. في حالة بدء تشغيل مفتاحين بنفس الطريقة، مثل count و counts، يفوز المفتاح الأطول.
• يمكن أن يظهر نفس الاسم أكثر من مرة.
• يتم إدراج القيم كنص، وليس كـ HTML. ضع الترميز في النص المحيط بهم بدلاً من ذلك: Hi <b>$name</b>.
• يتم استبدال المتغيرات بالنص فقط، وليس في السمات مثل href أو title.
• في وضع التطوير، يقوم المفتاح الذي لا يظهر في النص بتسجيل تحذير، مما يؤدي إلى اكتشاف الأخطاء المطبعية.
• باستخدام العرض من جانب الخادم، يتم عرض <t> مع [v] فارغًا على الخادم ويظهر بمجرد تشغيل التطبيق في المتصفح.

تستخدم المتغيرات $name بدلاً من {name} لأن Angular يقرأ { واحدًا في قالب كبداية لرسالة ICU، ولا يتم تجميع القالب.

القيود

1. لا يمكنك وضع مكونات Angular داخل مكون <t>. عناصر HTML العادية جيدة (انظر المثال أدناه). يمر الترميز المترجم عبر مطهر HTML الخاص بـ Angular.
2. لا يمكن أن يتجاوز المحتوى داخل مكون <t> 10 كيلوبايت، أي حوالي 5000 حرف.

<!-- 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>

لترجمة السمات والسلاسل الأخرى، استخدم t pipe.