각도로 동적 콘텐츠의 국제화? 다음

Question

Angular.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}}">{{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}}</td> 
     </tr> 
     </tbody> 
    </table> 

나는 이런 식으로 뭔가를 생각했다. 어떤 제안?

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