Bileşeni çeviriye hazırlama

Projenizi çeviriye hazırlamak için aşağıdaki işlemleri tamamlayın.

• Bileşen şablonlarındaki metni işaretlemek için i18n niteliğini kullanın
• Bileşen şablonlarındaki nitelik metin dizelerini işaretlemek için i18n- niteliğini kullanın
• Bileşen kodundaki metin dizelerini işaretlemek için $localize etiketli mesaj dizesini kullanın

Bileşen şablonunda metni işaretleme

Bir bileşen şablonunda, i18n meta verisi i18n niteliğinin değeridir.

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

Bileşen şablonlarınızdaki statik bir metin mesajını çeviri için işaretlemek üzere i18n niteliğini kullanın. Çevirmek istediğiniz sabit metin içeren her öğe etiketine yerleştirin.

i18n örneği

Aşağıdaki <h1> etiketi basit bir İngilizce selamlama olan "Hello i18n!" ifadesini görüntüler.

<h1>Hello i18n!</h1>

Selamlamayı çeviri için işaretlemek üzere <h1> etiketine i18n niteliğini ekleyin.

<h1 i18n>Hello i18n!</h1>

i18n ile koşullu ifade kullanma

Aşağıdaki <div> etiketi, değiştirme durumuna bağlı olarak div ve aria-label kapsamında çevrilmiş metni görüntüler

<button type="button" (click)="toggleDisplay()">Toggle</button>
<div i18n [attr.aria-label]="toggleAriaLabel()">{{ toggle() }}</div>

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);
  }
}

HTML öğesi olmadan satır içi metni çevirme

Metnin görüntülenme biçimini değiştirmeden belirli bir metin için çeviri davranışı ilişkilendirmek üzere <ng-container> öğesini kullanın.

<ng-container i18n>I don't output any element</ng-container>

Ara değer yer tutucusunu adlandırma

Angular varsayılan olarak, çevrilen bir mesajdaki her ara değer (interpolation) için bir yer tutucu adı üretir. Çevirmenlerin bağlamı anlamasına yardımcı olacak anlamlı bir ad vermek için ara değerin içine bir //i18n(ph="name") yorumu ekleyin.

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

Örneğin:

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

Bu, bileşen kodunda bir yer tutucuyu $localize ile adlandırmanın şablondaki karşılığıdır:

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

Çeviriler için öğe niteliklerini işaretleme

Bir bileşen şablonunda, i18n meta verisi i18n-{attribute_name} niteliğinin değeridir.

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

HTML öğelerinin nitelikleri, bileşen şablonundaki görüntülenen metnin geri kalanıyla birlikte çevrilmesi gereken metin içerir.

Herhangi bir öğenin herhangi bir niteliğiyle i18n-{attribute_name} kullanın ve {attribute_name} kısmını niteliğin adıyla değiştirin. Bir anlam, açıklama ve özel kimlik atamak için aşağıdaki söz dizimini kullanın.

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

i18n-title örneği

Bir görüntünün başlığını çevirmek için bu örneği inceleyin. Aşağıdaki örnek, title niteliğine sahip bir görüntüyü göstermektedir.

<img [src]="logo" title="Angular logo" alt="Angular logo" />

Title niteliğini çeviri için işaretlemek üzere aşağıdaki işlemi tamamlayın.

i18n-title niteliğini ekleyin

Aşağıdaki örnek, img etiketindeki title niteliğinin i18n-title eklenerek nasıl işaretlendiğini göstermektedir.

<img [src]="logo" i18n-title title="Angular logo" alt="Angular logo" />

Bileşen kodundaki metni işaretleme

Bileşen kodunda, çeviri kaynak metni ve meta veriler geri tırnak (`) karakterleriyle çevrelenir.

Kodunuzdaki bir dizeyi çeviri için işaretlemek üzere $localize etiketli mesaj dizesini kullanın.

$localize`string_to_translate`;

i18n meta verisi iki nokta üst üste (:) karakterleriyle çevrelenir ve çeviri kaynak metninin önüne eklenir.

$localize`:{i18n_metadata}:string_to_translate`;

Enterpolasyonlu metin ekleme

Bir $localize etiketli mesaj dizesine enterpolasyonlar ekleyin.

$localize`string_to_translate ${variable_name}`;

Enterpolasyon yer tutucusunu adlandırma

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

Çeviriler için koşullu söz dizimi

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

Çeviri için i18n meta verileri

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

Aşağıdaki parametreler, çevirmeniniz için karışıklığı azaltmak amacıyla bağlam ve ek bilgi sağlar.

Özel kimlikler hakkında ek bilgi için Manage marked text with custom IDs bölümüne bakın.

Yardımcı açıklamalar ve anlamlar ekleme

Bir metin mesajını doğru şekilde çevirmek için çevirmene ek bilgi veya bağlam sağlayın.

i18n niteliğinin veya $localize etiketli mesaj dizesinin değeri olarak metin mesajının bir açıklamasını ekleyin.

Aşağıdaki örnek, i18n niteliğinin değerini göstermektedir.

<h1 i18n="An introduction header for this sample">Hello i18n!</h1>

Aşağıdaki örnek, açıklamalı $localize etiketli mesaj dizesinin değerini göstermektedir.

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

Çevirmenin, metni aynı anlama sahip diğer metinlerle aynı şekilde çevirmek için bu belirli uygulama bağlamında metin mesajının anlamını veya amacını bilmesi de gerekebilir. i18n nitelik değerini anlam ile başlatın ve | karakteri ile açıklamadan ayırın: {meaning}|{description}.

h1 örneği

Örneğin, <h1> etiketinin bir başlık olarak kullanılsın veya metnin başka bir bölümünde referans verilsin, aynı şekilde çevrilmesi gereken bir site başlığı olduğunu belirtmek isteyebilirsiniz.

Aşağıdaki örnek, <h1> etiketinin bir başlık olarak çevrilmesi veya başka bir yerde referans verilmesi gerektiğinin nasıl belirtileceğini göstermektedir.

<h1 i18n="site header|An introduction header for this sample">Hello i18n!</h1>

Sonuç olarak, anlam olarak site header ile işaretlenmiş herhangi bir metin tam olarak aynı şekilde çevrilir.

Aşağıdaki kod örneği, anlam ve açıklama içeren $localize etiketli mesaj dizesinin değerini göstermektedir.

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

ICU ifadeleri

ICU ifadeleri, bileşen şablonlarında koşulları karşılamak için alternatif metin işaretlemenize yardımcı olur. Bir ICU ifadesi, bir bileşen özelliği, bir ICU yan tümcesi ve açık süslü parantez ({) ile kapalı süslü parantez (}) karakterleriyle çevrili durum ifadelerini içerir.

{ component_property, icu_clause, case_statements }

Bileşen özelliği değişkeni tanımlar. Bir ICU yan tümcesi koşullu metin türünü tanımlar.

Çeviriyi basitleştirmek için Uluslararası Unicode Bileşenleri yan tümcelerini (ICU yan tümceleri) düzenli ifadelerle kullanın.

Çoğulları işaretleme

Farklı diller, çevirinin zorluğunu artıran farklı çoğullama kurallarına sahiptir. Diğer yerel ayarlar kardinaliteyi farklı şekilde ifade ettiğinden, İngilizce ile uyumlu olmayan çoğullama kategorileri ayarlamanız gerekebilir. Kelime kelime çevrildiğinde anlamlı olmayabilecek ifadeleri işaretlemek için plural yan tümcesini kullanın.

{ component_property, plural, pluralization_categories }

Çoğullama kategorisinden sonra, açık süslü parantez ({) ve kapalı süslü parantez (}) karakterleriyle çevrili varsayılan metni (İngilizce) girin.

pluralization_category { }

Aşağıdaki çoğullama kategorileri İngilizce için mevcuttur ve yerel ayara göre değişebilir.

Çoğullama kategorilerinden hiçbiri eşleşmezse, Angular eksik bir kategori için standart geri dönüş olarak other kullanır.

other { default_quantity }

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

minutes örneği

Aşağıdaki ifadeyi İngilizce olarak görüntülemek istiyorsanız, burada x bir sayıdır.

updated x minutes ago

Ve ayrıca x'in kardinalitesine göre aşağıdaki ifadeleri de görüntülemek istiyorsanız.

updated just now

updated one minute ago

HTML işaretlemesi ve enterpolasyonlar kullanın. Aşağıdaki kod örneği, önceki üç durumu bir <span> öğesinde ifade etmek için plural yan tümcesinin nasıl kullanılacağını göstermektedir.

<span i18n
  >Updated
  {minutes, plural, =0 {just now} =1 {one minute ago} other {{{ minutes }} minutes ago}}</span
>

Önceki kod örneğindeki aşağıdaki ayrıntıları inceleyin.

{{minutes}} bir enterpolasyondur.

Alternatifleri ve iç içe ifadeleri işaretleme

select yan tümcesi, tanımladığınız dize değerlerine dayalı alternatif metin seçimlerini işaretler.

{ component_property, select, selection_categories }

Bir değişkenin değerine dayalı alternatif metin görüntülemek için tüm alternatifleri çevirin.

Seçim kategorisinden sonra, açık süslü parantez ({) ve kapalı süslü parantez (}) karakterleriyle çevrili metni (İngilizce) girin.

selection_category { text }

Farklı diller, çevirinin zorluğunu artıran farklı dilbilgisi yapılarına sahiptir. HTML işaretlemesi kullanın. Seçim kategorilerinden hiçbiri eşleşmezse, Angular eksik bir kategori için standart geri dönüş olarak other kullanır.

other { default_value }

gender örneği

Aşağıdaki ifadeyi İngilizce olarak görüntülemek istiyorsanız.

The author is other

Ve ayrıca bileşenin gender özelliğine göre aşağıdaki ifadeleri de görüntülemek istiyorsanız.

The author is female

The author is male

Aşağıdaki kod örneği, bileşenin gender özelliğinin nasıl bağlanacağını ve önceki üç durumu bir <span> öğesinde ifade etmek için select yan tümcesinin nasıl kullanılacağını göstermektedir.

gender özelliği, çıktıları aşağıdaki dize değerlerinin her birine bağlar.

select yan tümcesi değerleri uygun çevirilere eşler. Aşağıdaki kod örneği, select yan tümcesiyle birlikte kullanılan gender özelliğini göstermektedir.

<span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>

gender ve minutes örneği

plural ve select yan tümceleri gibi farklı yan tümceleri bir araya getirin. Aşağıdaki kod örneği, gender ve minutes örneklerine dayalı iç içe yan tümceleri göstermektedir.

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

Sıradaki