代码之家 › 专栏 › 技术社区 › Dino

角型I18N,用于包含RouterLink的文本,需要不同的字顺序

angular-i18n internationalization angular

2

Dino · 技术社区 · 7 年前

我正在努力寻找最有效的方法来翻译包含routerlink的文本或应该用HTML标记包装某些单词的文本。( 单词 )

让我们看看它看起来怎么样没有 i18n实现:

示例.component.html

<div>
 Hello and welcome to this test example. In order to proceed click on this 
 <a [routerLink]="['settings/subscription']">Link</a>
</div>

现在让我们补充一下 I18N 并使用一种可能的方法来处理路由器链接: 杰森

{
  "WELCOME_LABEL": "Hello and welcome to this test example. In order to proceed click on this,
  "LINK_LABEL": "link"
}

示例.component.html

<div>
 {{'WELCOME_LABEL' | translate}} 
 <a [routerLink]="['settings/subscription']">{{'LINK_LABEL' | translate}}</a>
</div>

这种方法的问题在于,不同的语言可能有不同的单词顺序。例如。 “请单击此链接” 在其他语言中,可能有这样的顺序 “ 链接他说:“这是一个很好的选择。” 在句子的开头或中间。

是否有一些一般/官方的方法来处理这种情况?

解决这个问题的一种方法是在组件中获取当前的区域设置,然后根据它执行if签入模板。

我不喜欢这种方式,因为我有点脱离了I18N实践,并基于区域设置创建单独的JSON对象,以满足单词排序的需要。

示例.component.ts

constructor(
    @Inject( LOCALE_ID ) protected localeId: string
) {
    console.log(this.localeId);
}

示例.component.html

<div *ngIf="localeId === 'en-Us'">
 {{'WELCOME_LABEL_EN' | translate}} 
 <a [routerLink]="['settings/subscription']">{{'LINK_LABEL_EN' | translate}}</a>
</div>
<div *ngIf="localeId === 'otherLanguage'">
 {{'WELCOME_LABEL_1_OTHER' | translate}} 
 <a [routerLink]="['settings/subscription']">{{'LINK_LABEL_OTHER' | translate}}</a>
 {{'WELCOME_LABEL_2_OTHER' | translate}} 
</div>

1 回复 | 直到 7 年前

1

Kapcash 7 年前

如果你简单地定义 <div> 分三部分?比如,文本开始,链接,然后结束。

<div>
  {{'WELCOME_LABEL_START' | translate}}
  <a [routerLink]="['settings/subscription']">{{'LINK_LABEL' | translate}}</a>
  {{'WELCOME_LABEL_END' | translate}}
</div>

这样,根据语言,你只需要用两个部分来定义这个句子。

{
  "WELCOME_LABEL_START": "In order to proceed, click on this,
  "LINK_LABEL": "link",
  "WELCOME_LABEL_END": " whatever language you have."
}

如果不必要的话,你就让开始/结束都空了。