آماده‌سازی کامپوننت برای ترجمه

برای آماده‌سازی پروژه خود برای ترجمه، actionهای زیر را انجام دهید.

از attribute مربوط به i18n برای mark کردن متن در component templateها استفاده کنید.
از attribute مربوط به i18n- برای mark کردن text stringهای attribute در component templateها استفاده کنید.
از tagged message string مربوط به $localize برای mark کردن text stringها در کد کامپوننت استفاده کنید.

Mark کردن متن در component template

در component template، metadata مربوط به i18n همان مقدار attribute مربوط به i18n است.

html

<element i18n="{i18n_metadata}">{string_to_translate}</element>

از attribute مربوط به i18n استفاده کنید تا یک static text message را در component templateهای خود برای ترجمه mark کنید. آن را روی هر element tagای قرار دهید که متن ثابتی دارد و می‌خواهید ترجمه شود.

مثال `i18n`

tag زیر یعنی <h1> یک greeting ساده انگلیسی، "Hello i18n!"، را نمایش می‌دهد.

app.component.html

<!--#docregion greeting-->
<h1>Hello i18n!</h1>
<!--#enddocregion greeting-->

<!--#docregion i18n-attribute-->
<h1 i18n>Hello i18n!</h1>
<!--#enddocregion i18n-attribute-->

<!--#docregion i18n-attribute-desc-->
<h1 i18n="An introduction header for this sample">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-desc-->

<!--#docregion i18n-attribute-meaning-->
<h1 i18n="site header|An introduction header for this sample">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-meaning-->

<!--#docregion i18n-attribute-id-->
<h1 i18n="An introduction header for this sample@@introductionHeader">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-id-->

<!--#docregion i18n-attribute-meaning-and-id-->
<h1 i18n="site header|An introduction header for this sample@@introductionHeader">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-meaning-and-id-->

<!--#docregion i18n-attribute-solo-id-->
<h1 i18n="@@introductionHeader">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-solo-id-->

<!--#docregion i18n-title-->
<img [src]="logo" title="Angular logo" alt="Angular logo" />
<!--#enddocregion i18n-title-->

<!--#docregion i18n-duplicate-custom-id-->
<h3 i18n="@@myId">Hello</h3>
<!-- ... -->
<p i18n="@@myId">Good bye</p>
<!--#enddocregion i18n-duplicate-custom-id-->

برای mark کردن greeting جهت ترجمه، attribute مربوط به i18n را به tag مربوط به <h1> اضافه کنید.

app.component.html

<!--#docregion greeting-->
<h1>Hello i18n!</h1>
<!--#enddocregion greeting-->

<!--#docregion i18n-attribute-->
<h1 i18n>Hello i18n!</h1>
<!--#enddocregion i18n-attribute-->

<!--#docregion i18n-attribute-desc-->
<h1 i18n="An introduction header for this sample">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-desc-->

<!--#docregion i18n-attribute-meaning-->
<h1 i18n="site header|An introduction header for this sample">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-meaning-->

<!--#docregion i18n-attribute-id-->
<h1 i18n="An introduction header for this sample@@introductionHeader">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-id-->

<!--#docregion i18n-attribute-meaning-and-id-->
<h1 i18n="site header|An introduction header for this sample@@introductionHeader">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-meaning-and-id-->

<!--#docregion i18n-attribute-solo-id-->
<h1 i18n="@@introductionHeader">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-solo-id-->

<!--#docregion i18n-title-->
<img [src]="logo" title="Angular logo" alt="Angular logo" />
<!--#enddocregion i18n-title-->

<!--#docregion i18n-duplicate-custom-id-->
<h3 i18n="@@myId">Hello</h3>
<!-- ... -->
<p i18n="@@myId">Good bye</p>
<!--#enddocregion i18n-duplicate-custom-id-->

استفاده از conditional statement با `i18n`

tag زیر یعنی <div> بر اساس toggle status، متن ترجمه‌شده را به عنوان بخشی از div و aria-label نمایش می‌دهد.

html

<!--#docregion-->
<h1 i18n="User welcome|An introduction header for this sample@@introductionHeader">Hello i18n!</h1>

<!--#docregion i18n-ng-container-->
<ng-container i18n>I don't output any element</ng-container>
<!--#enddocregion i18n-ng-container-->

<br />

<!--#docregion i18n-title-translate-->
<img [src]="logo" i18n-title title="Angular logo" alt="Angular logo" />
<!--#enddocregion i18n-title-translate-->
<br />
<button type="button" (click)="inc(1)">+</button> <button type="button" (click)="inc(-1)">-</button>
<!--#docregion i18n-plural-->
<span i18n
  >Updated
  {minutes, plural, =0 {just now} =1 {one minute ago} other {{{ minutes }} minutes ago}}</span
>
<!--#enddocregion i18n-plural-->
({{ minutes }}) <br /><br />
<button type="button" (click)="male()">&#9794;</button>
<button type="button" (click)="female()">&#9792;</button>
<button type="button" (click)="other()">&#9895;</button>
<!--#docregion i18n-select-->
<span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>
<!--#enddocregion i18n-select-->
<br /><br />
<!--#docregion i18n-nested-->
<span i18n
  >Updated:
  {minutes, plural,
    =0 {just now}
    =1 {one minute ago}
    other {{{ minutes }} minutes ago by {gender, select, male {male} female {female} other {other}}}
  }
</span>
<!--#enddocregion i18n-nested-->
<br /><br />
<!--#docregion i18n-conditional-->
<button type="button" (click)="toggleDisplay()">Toggle</button>
<div i18n [attr.aria-label]="toggleAriaLabel()">{{ toggle() }}</div>
<!--#enddocregion i18n-conditional-->

// #docregion
import {Component, computed, signal} from '@angular/core';
import {$localize} from '@angular/localize/init';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  minutes = 0;
  gender = 'female';
  fly = true;
  logo = '${this.baseUrl}/angular.svg';
  readonly toggle = signal(false);
  readonly toggleAriaLabel = computed(() => {
    return this.toggle()
      ? $localize`:Toggle Button|A button to toggle status:Show`
      : $localize`:Toggle Button|A button to toggle status:Hide`;
  });

  inc(i: number) {
    this.minutes = Math.min(5, Math.max(0, this.minutes + i));
  }
  male() {
    this.gender = 'male';
  }
  female() {
    this.gender = 'female';
  }
  other() {
    this.gender = 'other';
  }
  toggleDisplay() {
    this.toggle.update((toggle) => !toggle);
  }
}

ترجمه inline text بدون HTML element

از element مربوط به <ng-container> استفاده کنید تا behavior ترجمه را به یک متن مشخص associate کنید، بدون اینکه نحوه نمایش متن تغییر کند.

برای جلوگیری از ایجاد DOM element جدید، متن را داخل یک element از نوع <ng-container> wrap کنید. مثال زیر نشان می‌دهد element مربوط به <ng-container> به یک HTML comment غیرقابل‌نمایش تبدیل شده است.

html

<!--#docregion-->
<h1 i18n="User welcome|An introduction header for this sample@@introductionHeader">Hello i18n!</h1>

<!--#docregion i18n-ng-container-->
<ng-container i18n>I don't output any element</ng-container>
<!--#enddocregion i18n-ng-container-->

<br />

<!--#docregion i18n-title-translate-->
<img [src]="logo" i18n-title title="Angular logo" alt="Angular logo" />
<!--#enddocregion i18n-title-translate-->
<br />
<button type="button" (click)="inc(1)">+</button> <button type="button" (click)="inc(-1)">-</button>
<!--#docregion i18n-plural-->
<span i18n
  >Updated
  {minutes, plural, =0 {just now} =1 {one minute ago} other {{{ minutes }} minutes ago}}</span
>
<!--#enddocregion i18n-plural-->
({{ minutes }}) <br /><br />
<button type="button" (click)="male()">&#9794;</button>
<button type="button" (click)="female()">&#9792;</button>
<button type="button" (click)="other()">&#9895;</button>
<!--#docregion i18n-select-->
<span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>
<!--#enddocregion i18n-select-->
<br /><br />
<!--#docregion i18n-nested-->
<span i18n
  >Updated:
  {minutes, plural,
    =0 {just now}
    =1 {one minute ago}
    other {{{ minutes }} minutes ago by {gender, select, male {male} female {female} other {other}}}
  }
</span>
<!--#enddocregion i18n-nested-->
<br /><br />
<!--#docregion i18n-conditional-->
<button type="button" (click)="toggleDisplay()">Toggle</button>
<div i18n [attr.aria-label]="toggleAriaLabel()">{{ toggle() }}</div>
<!--#enddocregion i18n-conditional-->

نام‌گذاری interpolation placeholder

به صورت پیش‌فرض، Angular برای هر interpolation در یک message ترجمه‌شده یک placeholder name تولید می‌کند. برای دادن نام معنادار که به translator کمک کند context را بفهمد، داخل interpolation یک comment به شکل //i18n(ph="name") اضافه کنید.

html

<element i18n>{{ expression //i18n(ph="placeholder_name") }}</element>

برای مثال:

html

<p i18n>Hello, {{ username //i18n(ph="name") }}!</p>

این معادل template برای نام‌گذاری placeholder در component code با [$localize][ApiLocalizeInitLocalize] است:

$localize`Hello, ${username}:name:!`;

Mark کردن attributeهای element برای ترجمه

در component template، metadata مربوط به i18n همان مقدار attribute مربوط به i18n-{attribute_name} است.

html

<element i18n-{attribute_name}="{i18n_metadata}" {attribute_name}="{attribute_value}" />

attributeهای HTML elementها شامل متنی هستند که باید همراه با بقیه متن نمایش‌داده‌شده در component template ترجمه شود.

از i18n-{attributename} همراه با هر attribute از هر element استفاده کنید و {attributename} را با نام attribute جایگزین کنید. برای assign کردن meaning، description و custom ID، از syntax زیر استفاده کنید.

html

i18n-{attribute_name}="{meaning}|{description}@@{id}"

مثال `i18n-title`

برای ترجمه title یک image، این مثال را review کنید. مثال زیر یک image با attribute مربوط به title نمایش می‌دهد.

app.component.html

<!--#docregion greeting-->
<h1>Hello i18n!</h1>
<!--#enddocregion greeting-->

<!--#docregion i18n-attribute-->
<h1 i18n>Hello i18n!</h1>
<!--#enddocregion i18n-attribute-->

<!--#docregion i18n-attribute-desc-->
<h1 i18n="An introduction header for this sample">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-desc-->

<!--#docregion i18n-attribute-meaning-->
<h1 i18n="site header|An introduction header for this sample">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-meaning-->

<!--#docregion i18n-attribute-id-->
<h1 i18n="An introduction header for this sample@@introductionHeader">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-id-->

<!--#docregion i18n-attribute-meaning-and-id-->
<h1 i18n="site header|An introduction header for this sample@@introductionHeader">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-meaning-and-id-->

<!--#docregion i18n-attribute-solo-id-->
<h1 i18n="@@introductionHeader">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-solo-id-->

<!--#docregion i18n-title-->
<img [src]="logo" title="Angular logo" alt="Angular logo" />
<!--#enddocregion i18n-title-->

<!--#docregion i18n-duplicate-custom-id-->
<h3 i18n="@@myId">Hello</h3>
<!-- ... -->
<p i18n="@@myId">Good bye</p>
<!--#enddocregion i18n-duplicate-custom-id-->

برای mark کردن attribute مربوط به title جهت ترجمه، action زیر را انجام دهید.

attribute مربوط به i18n-title را اضافه کنید.

مثال زیر نشان می‌دهد چطور با افزودن i18n-title، attribute مربوط به title را روی tag مربوط به img mark کنید.

app.component.html

<!--#docregion-->
<h1 i18n="User welcome|An introduction header for this sample@@introductionHeader">Hello i18n!</h1>

<!--#docregion i18n-ng-container-->
<ng-container i18n>I don't output any element</ng-container>
<!--#enddocregion i18n-ng-container-->

<br />

<!--#docregion i18n-title-translate-->
<img [src]="logo" i18n-title title="Angular logo" alt="Angular logo" />
<!--#enddocregion i18n-title-translate-->
<br />
<button type="button" (click)="inc(1)">+</button> <button type="button" (click)="inc(-1)">-</button>
<!--#docregion i18n-plural-->
<span i18n
  >Updated
  {minutes, plural, =0 {just now} =1 {one minute ago} other {{{ minutes }} minutes ago}}</span
>
<!--#enddocregion i18n-plural-->
({{ minutes }}) <br /><br />
<button type="button" (click)="male()">&#9794;</button>
<button type="button" (click)="female()">&#9792;</button>
<button type="button" (click)="other()">&#9895;</button>
<!--#docregion i18n-select-->
<span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>
<!--#enddocregion i18n-select-->
<br /><br />
<!--#docregion i18n-nested-->
<span i18n
  >Updated:
  {minutes, plural,
    =0 {just now}
    =1 {one minute ago}
    other {{{ minutes }} minutes ago by {gender, select, male {male} female {female} other {other}}}
  }
</span>
<!--#enddocregion i18n-nested-->
<br /><br />
<!--#docregion i18n-conditional-->
<button type="button" (click)="toggleDisplay()">Toggle</button>
<div i18n [attr.aria-label]="toggleAriaLabel()">{{ toggle() }}</div>
<!--#enddocregion i18n-conditional-->

Mark کردن متن در component code

در component code، source text مربوط به ترجمه و metadata با کاراکترهای backtick $<code>`</code>$ احاطه می‌شوند.

از tagged message string مربوط به [$localize][ApiLocalizeInitLocalize] استفاده کنید تا یک string را در کد خود برای ترجمه mark کنید.

$localize`string_to_translate`;

metadata مربوط به i18n با کاراکترهای colon $:$ احاطه می‌شود و قبل از source text ترجمه قرار می‌گیرد.

$localize`:{i18n_metadata}:string_to_translate`;

شامل کردن متن interpolated

interpolationها را داخل یک tagged message string مربوط به [$localize][ApiLocalizeInitLocalize] وارد کنید.

$localize`string_to_translate ${variable_name}`;

نام‌گذاری interpolation placeholder

$localize`string_to_translate ${variable_name}:placeholder_name:`;

Syntax شرطی برای ترجمه‌ها

return this.show ? $localize`Show Tabs` : $localize`Hide tabs`;

i18n metadata برای ترجمه

html

{meaning}|{description}@@{custom_id}

parameterهای زیر context و اطلاعات اضافی فراهم می‌کنند تا ابهام برای translator کمتر شود.

Metadata parameter	جزئیات
Custom ID	یک custom identifier فراهم کنید
Description	اطلاعات یا context اضافی فراهم کنید
Meaning	meaning یا intent متن را در context مشخص فراهم کنید

برای اطلاعات بیشتر درباره custom IDها، [Manage marked text with custom IDs][GuideI18nOptionalManageMarkedText] را ببینید.

افزودن description و meaning مفید

برای ترجمه دقیق یک text message، اطلاعات یا context بیشتری برای translator فراهم کنید.

یک description از text message را به عنوان مقدار attribute مربوط به i18n یا tagged message string مربوط به [$localize][ApiLocalizeInitLocalize] اضافه کنید.

مثال زیر مقدار attribute مربوط به i18n را نشان می‌دهد.

app.component.html

<!--#docregion greeting-->
<h1>Hello i18n!</h1>
<!--#enddocregion greeting-->

<!--#docregion i18n-attribute-->
<h1 i18n>Hello i18n!</h1>
<!--#enddocregion i18n-attribute-->

<!--#docregion i18n-attribute-desc-->
<h1 i18n="An introduction header for this sample">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-desc-->

<!--#docregion i18n-attribute-meaning-->
<h1 i18n="site header|An introduction header for this sample">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-meaning-->

<!--#docregion i18n-attribute-id-->
<h1 i18n="An introduction header for this sample@@introductionHeader">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-id-->

<!--#docregion i18n-attribute-meaning-and-id-->
<h1 i18n="site header|An introduction header for this sample@@introductionHeader">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-meaning-and-id-->

<!--#docregion i18n-attribute-solo-id-->
<h1 i18n="@@introductionHeader">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-solo-id-->

<!--#docregion i18n-title-->
<img [src]="logo" title="Angular logo" alt="Angular logo" />
<!--#enddocregion i18n-title-->

<!--#docregion i18n-duplicate-custom-id-->
<h3 i18n="@@myId">Hello</h3>
<!-- ... -->
<p i18n="@@myId">Good bye</p>
<!--#enddocregion i18n-duplicate-custom-id-->

مثال زیر مقدار tagged message string مربوط به [$localize][ApiLocalizeInitLocalize] را همراه با description نشان می‌دهد.

$localize`:An introduction header for this sample:Hello i18n!`;

translator همچنین ممکن است لازم داشته باشد meaning یا intent یک text message را در context خاص همین application بداند، تا آن را مثل متن‌های دیگری که همان meaning را دارند ترجمه کند. مقدار attribute مربوط به i18n را با meaning شروع کنید و آن را با کاراکتر | از description جدا کنید: {meaning}|{description}.

مثال `h1`

برای مثال، ممکن است بخواهید مشخص کنید tag مربوط به <h1> یک site header است و باید به همان شکل ترجمه شود، چه به عنوان header استفاده شود و چه در بخش دیگری از متن به آن اشاره شود.

مثال زیر نشان می‌دهد چطور مشخص کنید tag مربوط به <h1> باید به عنوان header ترجمه شود یا جای دیگری به آن ارجاع داده شود.

app.component.html

<!--#docregion greeting-->
<h1>Hello i18n!</h1>
<!--#enddocregion greeting-->

<!--#docregion i18n-attribute-->
<h1 i18n>Hello i18n!</h1>
<!--#enddocregion i18n-attribute-->

<!--#docregion i18n-attribute-desc-->
<h1 i18n="An introduction header for this sample">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-desc-->

<!--#docregion i18n-attribute-meaning-->
<h1 i18n="site header|An introduction header for this sample">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-meaning-->

<!--#docregion i18n-attribute-id-->
<h1 i18n="An introduction header for this sample@@introductionHeader">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-id-->

<!--#docregion i18n-attribute-meaning-and-id-->
<h1 i18n="site header|An introduction header for this sample@@introductionHeader">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-meaning-and-id-->

<!--#docregion i18n-attribute-solo-id-->
<h1 i18n="@@introductionHeader">Hello i18n!</h1>
<!--#enddocregion i18n-attribute-solo-id-->

<!--#docregion i18n-title-->
<img [src]="logo" title="Angular logo" alt="Angular logo" />
<!--#enddocregion i18n-title-->

<!--#docregion i18n-duplicate-custom-id-->
<h3 i18n="@@myId">Hello</h3>
<!-- ... -->
<p i18n="@@myId">Good bye</p>
<!--#enddocregion i18n-duplicate-custom-id-->

نتیجه این است که هر متنی که با site header به عنوان meaning mark شده، دقیقاً به همان شکل ترجمه می‌شود.

مثال code زیر مقدار tagged message string مربوط به [$localize][ApiLocalizeInitLocalize] را همراه با meaning و description نشان می‌دهد.

$localize`:site header|An introduction header for this sample:Hello i18n!`;

Meaningها چطور text extraction و mergeها را کنترل می‌کنند

ابزار extraction در Angular برای هر attribute مربوط به i18n در template، یک translation unit entry تولید می‌کند. ابزار extraction در Angular به هر translation unit یک ID منحصربه‌فرد بر اساس meaning و description assign می‌کند.

text elementهای یکسان با meaningهای متفاوت، با IDهای متفاوت extract می‌شوند. برای مثال، اگر واژه "right" در دو location متفاوت از دو definition زیر استفاده کند، آن واژه متفاوت ترجمه می‌شود و به عنوان translation entryهای متفاوت به application merge می‌شود.

correct مثل "you are right"
direction مثل "turn right"

اگر text elementهای یکسان شرایط زیر را داشته باشند، فقط یک بار extract می‌شوند و از همان ID استفاده می‌کنند.

meaning یا definition یکسان
descriptionهای متفاوت

همان یک translation entry هر جا همان text elementها ظاهر شوند به application merge می‌شود.

ICU expressionها

ICU expressionها به شما کمک می‌کنند alternate text را در component templateها mark کنید تا conditionها را پوشش دهد. یک ICU expression شامل یک component property، یک ICU clause و case statementهایی است که با کاراکترهای open curly brace ${$ و close curly brace $}$ احاطه شده‌اند.

html

{ component_property, icu_clause, case_statements }

component property همان variable را تعریف می‌کند. یک ICU clause نوع متن شرطی را تعریف می‌کند.

ICU clause	جزئیات
[`plural`][GuideI18nCommonPrepareMarkPlurals]	استفاده از plural numberها را mark می‌کند
[`select`][GuideI18nCommonPrepareMarkAlternatesAndNestedExpressions]	choiceها را برای alternate text بر اساس string valueهای تعریف‌شده شما mark می‌کند

برای ساده‌تر کردن ترجمه، از International Components for Unicode clauses $ICU clauses$ همراه با regular expressionها استفاده کنید.

Mark کردن pluralها

زبان‌های مختلف ruleهای pluralization متفاوتی دارند که دشواری ترجمه را بیشتر می‌کند. چون localeهای دیگر cardinality را متفاوت بیان می‌کنند، ممکن است لازم باشد pluralization categoryهایی تنظیم کنید که با English هم‌راستا نیستند. از clause مربوط به plural برای mark کردن expressionهایی استفاده کنید که اگر word-for-word ترجمه شوند ممکن است معنای درستی نداشته باشند.

html

{ component_property, plural, pluralization_categories }

بعد از pluralization category، متن پیش‌فرض $English$ را وارد کنید که با کاراکترهای open curly brace ${$ و close curly brace $}$ احاطه شده است.

html

pluralization_category { }

pluralization categoryهای زیر برای English در دسترس هستند و ممکن است بر اساس locale تغییر کنند.

Pluralization category	جزئیات	Example
`zero`	Quantity برابر zero است	`=0 { }` `zero { }`
`one`	Quantity برابر 1 است	`=1 { }` `one { }`
`two`	Quantity برابر 2 است	`=2 { }` `two { }`
`few`	Quantity برابر 2 یا بیشتر است	`few { }`
`many`	Quantity یک number بزرگ است	`many { }`
`other`	Quantity پیش‌فرض	`other { }`

اگر هیچ‌کدام از pluralization categoryها match نشوند، Angular از other برای match کردن fallback استاندارد category missing استفاده می‌کند.

html

other { default_quantity }

Background: ممکن است localeها بعضی pluralization categoryها را پشتیبانی نکنند

بسیاری از localeها بعضی pluralization categoryها را پشتیبانی نمی‌کنند. locale پیش‌فرض $en-US$ از یک function بسیار ساده plural() استفاده می‌کند که pluralization category مربوط به few را پشتیبانی نمی‌کند. locale دیگری با یک function ساده plural()، مقدار es است. مثال code زیر function مربوط به [en-US plural()][GithubAngularAngularBlobEcffc3557fe1bff9718c01277498e877ca44588dPackagesCoreSrcI18nLocaleEnTsL14L18] را نشان می‌دهد.

/* eslint-disable */
// #docregion
function plural(n: number): number {
  let i = Math.floor(Math.abs(n)),
    v = n.toString().replace(/^[^.]*\.?/, '').length;
  if (i === 1 && v === 0) return 1;
  return 5;
}

function مربوط به plural() فقط 1 $one$ یا 5 $other$ برمی‌گرداند. category مربوط به few هیچ‌وقت match نمی‌شود.

مثال `minutes`

اگر می‌خواهید phrase زیر را در English نمایش دهید، جایی که x یک number است.

html

updated x minutes ago

و همچنین می‌خواهید phraseهای زیر را بر اساس cardinality مربوط به x نمایش دهید.

html

updated just now

html

updated one minute ago

از HTML markup و interpolationها استفاده کنید. مثال code زیر نشان می‌دهد چطور از clause مربوط به plural استفاده کنید تا سه وضعیت قبلی را در یک element از نوع <span> بیان کنید.

app.component.html

<!--#docregion-->
<h1 i18n="User welcome|An introduction header for this sample@@introductionHeader">Hello i18n!</h1>

<!--#docregion i18n-ng-container-->
<ng-container i18n>I don't output any element</ng-container>
<!--#enddocregion i18n-ng-container-->

<br />

<!--#docregion i18n-title-translate-->
<img [src]="logo" i18n-title title="Angular logo" alt="Angular logo" />
<!--#enddocregion i18n-title-translate-->
<br />
<button type="button" (click)="inc(1)">+</button> <button type="button" (click)="inc(-1)">-</button>
<!--#docregion i18n-plural-->
<span i18n
  >Updated
  {minutes, plural, =0 {just now} =1 {one minute ago} other {{{ minutes }} minutes ago}}</span
>
<!--#enddocregion i18n-plural-->
({{ minutes }}) <br /><br />
<button type="button" (click)="male()">&#9794;</button>
<button type="button" (click)="female()">&#9792;</button>
<button type="button" (click)="other()">&#9895;</button>
<!--#docregion i18n-select-->
<span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>
<!--#enddocregion i18n-select-->
<br /><br />
<!--#docregion i18n-nested-->
<span i18n
  >Updated:
  {minutes, plural,
    =0 {just now}
    =1 {one minute ago}
    other {{{ minutes }} minutes ago by {gender, select, male {male} female {female} other {other}}}
  }
</span>
<!--#enddocregion i18n-nested-->
<br /><br />
<!--#docregion i18n-conditional-->
<button type="button" (click)="toggleDisplay()">Toggle</button>
<div i18n [attr.aria-label]="toggleAriaLabel()">{{ toggle() }}</div>
<!--#enddocregion i18n-conditional-->

جزئیات زیر را در مثال code قبلی review کنید.

Parameters	جزئیات
`minutes`	parameter اول مشخص می‌کند component property برابر `minutes` است و تعداد minuteها را تعیین می‌کند.
`plural`	parameter دوم مشخص می‌کند ICU clause برابر `plural` است.
`=0 {just now}`	برای zero minute، pluralization category برابر `=0` است. value برابر `just now` است.
`=1 {one minute}`	برای one minute، pluralization category برابر `=1` است. value برابر `one minute` است.
`other {{{minutes}} minutes ago}`	برای هر cardinality بدون match، pluralization category پیش‌فرض `other` است. value برابر `{{minutes}} minutes ago` است.

{{minutes}} یک interpolation است.

Mark کردن alternateها و nested expressionها

clause مربوط به select، choiceها را برای alternate text بر اساس string valueهای تعریف‌شده شما mark می‌کند.

html

{ component_property, select, selection_categories }

همه alternateها را ترجمه کنید تا alternate text بر اساس مقدار یک variable نمایش داده شود.

بعد از selection category، متن $English$ را وارد کنید که با کاراکترهای open curly brace ${$ و close curly brace $}$ احاطه شده است.

html

selection_category { text }

زبان‌های مختلف ساختارهای grammatical متفاوتی دارند که دشواری ترجمه را بیشتر می‌کند. از HTML markup استفاده کنید. اگر هیچ‌کدام از selection categoryها match نشوند، Angular از other برای match کردن fallback استاندارد category missing استفاده می‌کند.

html

other { default_value }

مثال `gender`

اگر می‌خواهید phrase زیر را در English نمایش دهید.

html

The author is other

و همچنین می‌خواهید phraseهای زیر را بر اساس property مربوط به gender در کامپوننت نمایش دهید.

html

The author is female

html

The author is male

مثال code زیر نشان می‌دهد چطور property مربوط به gender در کامپوننت را bind کنید و از clause مربوط به select استفاده کنید تا سه وضعیت قبلی را در یک element از نوع <span> بیان کنید.

property مربوط به gender خروجی‌ها را به هرکدام از string valueهای زیر bind می‌کند.

Value	English value
female	`female`
male	`male`
other	`other`

clause مربوط به select، valueها را به translationهای مناسب map می‌کند. مثال code زیر property مربوط به gender را همراه با select clause نشان می‌دهد.

app.component.html

<!--#docregion-->
<h1 i18n="User welcome|An introduction header for this sample@@introductionHeader">Hello i18n!</h1>

<!--#docregion i18n-ng-container-->
<ng-container i18n>I don't output any element</ng-container>
<!--#enddocregion i18n-ng-container-->

<br />

<!--#docregion i18n-title-translate-->
<img [src]="logo" i18n-title title="Angular logo" alt="Angular logo" />
<!--#enddocregion i18n-title-translate-->
<br />
<button type="button" (click)="inc(1)">+</button> <button type="button" (click)="inc(-1)">-</button>
<!--#docregion i18n-plural-->
<span i18n
  >Updated
  {minutes, plural, =0 {just now} =1 {one minute ago} other {{{ minutes }} minutes ago}}</span
>
<!--#enddocregion i18n-plural-->
({{ minutes }}) <br /><br />
<button type="button" (click)="male()">&#9794;</button>
<button type="button" (click)="female()">&#9792;</button>
<button type="button" (click)="other()">&#9895;</button>
<!--#docregion i18n-select-->
<span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>
<!--#enddocregion i18n-select-->
<br /><br />
<!--#docregion i18n-nested-->
<span i18n
  >Updated:
  {minutes, plural,
    =0 {just now}
    =1 {one minute ago}
    other {{{ minutes }} minutes ago by {gender, select, male {male} female {female} other {other}}}
  }
</span>
<!--#enddocregion i18n-nested-->
<br /><br />
<!--#docregion i18n-conditional-->
<button type="button" (click)="toggleDisplay()">Toggle</button>
<div i18n [attr.aria-label]="toggleAriaLabel()">{{ toggle() }}</div>
<!--#enddocregion i18n-conditional-->

مثال `gender` و `minutes`

clauseهای مختلف را با هم ترکیب کنید، مثل clauseهای plural و select. مثال code زیر clauseهای nested را بر اساس مثال‌های gender و minutes نشان می‌دهد.

app.component.html

<!--#docregion-->
<h1 i18n="User welcome|An introduction header for this sample@@introductionHeader">Hello i18n!</h1>

<!--#docregion i18n-ng-container-->
<ng-container i18n>I don't output any element</ng-container>
<!--#enddocregion i18n-ng-container-->

<br />

<!--#docregion i18n-title-translate-->
<img [src]="logo" i18n-title title="Angular logo" alt="Angular logo" />
<!--#enddocregion i18n-title-translate-->
<br />
<button type="button" (click)="inc(1)">+</button> <button type="button" (click)="inc(-1)">-</button>
<!--#docregion i18n-plural-->
<span i18n
  >Updated
  {minutes, plural, =0 {just now} =1 {one minute ago} other {{{ minutes }} minutes ago}}</span
>
<!--#enddocregion i18n-plural-->
({{ minutes }}) <br /><br />
<button type="button" (click)="male()">&#9794;</button>
<button type="button" (click)="female()">&#9792;</button>
<button type="button" (click)="other()">&#9895;</button>
<!--#docregion i18n-select-->
<span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>
<!--#enddocregion i18n-select-->
<br /><br />
<!--#docregion i18n-nested-->
<span i18n
  >Updated:
  {minutes, plural,
    =0 {just now}
    =1 {one minute ago}
    other {{{ minutes }} minutes ago by {gender, select, male {male} female {female} other {other}}}
  }
</span>
<!--#enddocregion i18n-nested-->
<br /><br />
<!--#docregion i18n-conditional-->
<button type="button" (click)="toggleDisplay()">Toggle</button>
<div i18n [attr.aria-label]="toggleAriaLabel()">{{ toggle() }}</div>
<!--#enddocregion i18n-conditional-->

قدم بعدی

[ApiLocalizeInitLocalize]: api/localize/init/$localize '$localize | init - localize - API | Angular' [GuideI18nCommonPrepareMarkAlternatesAndNestedExpressions]: guide/i18n/prepare#mark-alternates-and-nested-expressions 'Mark alternates and nested expressions - Prepare templates for translation | Angular' [GuideI18nCommonPrepareMarkPlurals]: guide/i18n/prepare#mark-plurals 'Mark plurals - Prepare component for translation | Angular' [GuideI18nOptionalManageMarkedText]: guide/i18n/manage-marked-text 'Manage marked text with custom IDs | Angular' [GithubAngularAngularBlobEcffc3557fe1bff9718c01277498e877ca44588dPackagesCoreSrcI18nLocaleEnTsL14L18]: https://github.com/angular/angular/blob/ecffc3557fe1bff9718c01277498e877ca44588d/packages/core/src/i18n/localeen.ts#L14-L18 'Line 14 to 18 - angular/packages/core/src/i18n/localeen.ts | angular/angular | GitHub' [GithubUnicodeOrgIcuUserguideFormatParseMessages]: https://unicode-org.github.io/icu/userguide/format_parse/messages 'ICU Message Format - ICU Documentation | Unicode | GitHub' [UnicodeCldrMain]: https://cldr.unicode.org 'Unicode CLDR Project' [UnicodeCldrIndexCldrSpecPluralRules]: http://cldr.unicode.org/index/cldr-spec/plural-rules 'Plural Rules | CLDR - Unicode Common Locale Data Repository | Unicode' [UnicodeCldrIndexCldrSpecPluralRulesTocChoosingPluralCategoryNames]: http://cldr.unicode.org/index/cldr-spec/plural-rules#TOC-Choosing-Plural-Category-Names 'Choosing Plural Category Names - Plural Rules | CLDR - Unicode Common Locale Data Repository | Unicode'

آماده‌سازی کامپوننت برای ترجمه

Mark کردن متن در component template

مثال i18n

استفاده از conditional statement با i18n

ترجمه inline text بدون HTML element

نام‌گذاری interpolation placeholder

Mark کردن attributeهای element برای ترجمه

مثال i18n-title

Mark کردن متن در component code

شامل کردن متن interpolated

نام‌گذاری interpolation placeholder

Syntax شرطی برای ترجمه‌ها

i18n metadata برای ترجمه

افزودن description و meaning مفید

مثال h1

ICU expressionها

Mark کردن pluralها

مثال minutes

Mark کردن alternateها و nested expressionها

مثال gender

مثال gender و minutes

قدم بعدی

مثال `i18n`

استفاده از conditional statement با `i18n`

مثال `i18n-title`

مثال `h1`

مثال `minutes`

مثال `gender`

مثال `gender` و `minutes`