代码之家 › 专栏 › 技术社区 › Vinnie Saletto

Angular中动态内容的国际化?

angular-i18n internationalization typescript angular javascript

3

Vinnie Saletto · 技术社区 · 8 年前

有棱角的io对i18n标签的描述如下:

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

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

3 回复 | 直到 8 年前

1

3

Jerry Huckins 8 年前

首先,i18n值是一个ID,因此它总是静态的。

NgSwitch

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

显然,如果 事物状态 可能有很多不可控制的可能性。

    <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

Ivan Ivanyuk 7 年前

使用此结构

<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

-1

Ashraf Sarhan 5 年前

假设后端服务返回已知的可能值,则可以执行以下操作:

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>