javascript - Angular中动态内容的国际化？

Question

Angular.io 对 i18n 标签的描述如下:

The Angular i18n attribute marks translatable content. Place it on every element tag whose fixed text is to be translated.

所以我的问题是这样的。如果我有一个内容是动态的元素怎么办？以显示 Assets 列表的下表为例。 “描述”栏在某些情况下需要使用英语，在某些情况下需要使用其他语言。

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

我是这样想的:

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

...但我错了。有什么建议吗？

Answer 1

首先，i18n 值是一个 ID，因此它始终是静态的。

其次，就翻译内容的变化而言，我唯一的成功是使用 NgSwitch 的解决方法。在模板中。

在此示例中，thingStatus 是您的变量，其可能的值为“good”、“bad”和“unknown”。所有这些都将是一个单独的翻译项目，具有自己的 i18n ID 值。

显然，如果 thingStatus 可能有无法控制的可能性，这将失败。

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