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.

所以我的问题是这样的。如果我有一个内容为 dynamic 的元素怎么办？ 例如下面显示资产列表的 table。 "Description" 栏在某些情况下需要使用英语，在某些情况下需要使用其他语言。

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

Answer 2

使用这个结构

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

  bad {Bad}
  good {Good}

  other {Unknown}
}</span>

并且在翻译文件中会生成这样的结构（目标是手动添加的）

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

有关详细信息，请参阅 https://angular.io/guide/i18n#translate-select

Answer 3

假设您的后端服务 returns 已知可能的值，您可以执行以下操作：

const values = ['admin', 'teacher', 'librarian']

将翻译后的值添加到 sv_SE.json，将先前的值作为键

role: {
  "admin": "admin",
  "teacher": "lärare",
  "librarian": "Bibliotekarie"
}

在您的 app.component.html

中调用翻译

<div *ngFor="let value of values">
{{ ('role.' + value) | translate }}
</div>

Angular 中动态内容的国际化？

Internationalization of dynamic content in Angular?

javascript

internationalization

typescript

angular-i18n

angular