javascript - Angular'da dinamik içeriğin uluslararasılaştırılması?

Angular.io i18n etiketini şöyle tanımlamaktadır:

Angular i18n özniteliği çevrilebilir içeriği işaretler. Çevrilecek sabit metne sahip her öğe etiketine bunu yerleştirin.

O zaman sorum şu: İçeriği dinamik olan bir öğem olsaydı ne olurdu? Örneğin aşağıdaki tabloya bakın, bu tablo varlıkların bir listesini gösteriyor. "Description" sütunu, bazı durumlarda İngilizce, bazı durumlarda ise başka bir dilde olmalı.

    <table class="asset-table">
      <thead>
        <tr>
          <th i18n="@@alarm-list-timeon">Time On</th>
          <th i18n="@@alarm-list-timeoff">Time Off</th>
          <th i18n="@@alarm-list-asset">Asset</th>
          <th i18n="@@alarm-list-description">Description</th>
        </tr>
      </thead>
      <tbody *ngIf="showAssets">
        <tr *ngFor="let asset of pageItems">
          <td>{{asset.timeon}}</td>
          <td>{{asset.timeoff}}</td>
          <td>{{asset.assetlabel}}</td>
          <td i18n>{{asset.description}}</td>
        </tr>
      </tbody>
    </table>

Böyle bir şey düşünüyorum:

    <table class="asset-table">
      <thead>
        <tr>
          <th i18n="@@alarm-list-timeon">Time On</th>
          <th i18n="@@alarm-list-timeoff">Time Off</th>
          <th i18n="@@alarm-list-asset">Asset</th>
          <th i18n="@@alarm-list-description">Description</th>
        </tr>
      </thead>
      <tbody *ngIf="showAssets">
        <tr *ngFor="let asset of pageItems">
          <td>{{asset.timeon}}</td>
          <td>{{asset.timeoff}}</td>
          <td>{{asset.assetlabel}}</td>
          <td i18n="@@{{asset.description}}">{{asset.description}}</td>
        </tr>
      </tbody>
    </table>

...ama yanılmışım. Herhangi bir öneri?

Cevap #1

İlk olarak, i18n değeri bir ID'dir, bu nedenle her zaman statik olacaktır.

İkincisi, değişen içeriği çevirmek söz konusu olduğunda, sahip olduğum tek başarı, şablonda NgSwitch kullanarak yapılan bir geçici çözüm.

Bu örnekte, thingStatus sizin değişkeninizdir ve olası değerleri 'good', 'bad' ve 'unknown'dur. Bunların her biri kendi i18n ID değerine sahip ayrı bir çeviri öğesi olacaktır.

Açıkça, eğer thingStatus yönetilemez sayıda olasılığa sahip olabilirse, bu başarısız olurdu.

    <div [ngSwitch]="thingStatus">
        <p *ngSwitchCase="good" i18n="status_good>Good</p>
        <p *ngSwitchCase="bad" i18n="status_bad>Bad</p>
        <p *ngSwitchCase="unknown" i18n="status_unknown>Unknown</p>
    </div>

Cevap #2

Bu yapıyı kullan

<span
  i18n="status text|Status text@@statusText"
>{
  asset.statusLangCode, select,

  bad {Bad}
  good {Good}

  other {Unknown}
}</span>

Ve çeviri dosyasında bu şekilde bir yapı oluşturulacak (hedef manuel olarak eklenir)

<source>{VAR_SELECT, select, good {Good} bad {Bad} other {Unknown}}</source>
<target>{VAR_SELECT, select, good {Хороший} bad {Плохой} other {Неизвестный}}</target>

Daha fazla bilgi için bkz. https://angular.dev/guide/i18n/prepare#mark-alternates-and-nested-expressions

İlgili makaleler