Angular中动态内容的国际化？答案

【问题标题】：Internationalization of dynamic content in Angular?Angular中动态内容的国际化？
【发布时间】：2017-11-10 22:39:01
【问题描述】：

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

Angular i18n 属性标记可翻译内容。把它放在每个要翻译其固定文本的元素标签。

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

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

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

【问题讨论】：

Angular i18n 是静态的，而不是动态的。

标签： javascript angular typescript internationalization angular-i18n

【解决方案1】：

首先，i18n 值是一个 ID，所以它总是静态的。

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

在本例中，thingStatus 是您的变量，它的可能值是“好”、“坏”和“未知”。所有这些都将是一个单独的翻译项，具有自己的 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>

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

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

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>

【讨论】：