Angular i18n 用于包含 routerLink 的文本，需要不同的词序

Question

我正在努力寻找最有效的方法来翻译包含 routerLink 的文本或某些单词应包含在 html 标签 ( word ) 中的文本。

让我们看看没有 i18n 实现的样子：

example.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，并使用一种可能的方法来处理routerLink： en.json

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

example.component.html

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

这种方法的问题是不同的语言可能会有不同的顺序。例如。 "Please click on this link" 在某些其他语言中的顺序可能是 "link " 在句首或句中。

Is there some general / official approach to deal with this situation?

我解决它的一种方法是获取组件中的当前语言环境，然后根据它在模板中执行 if 检查。

我不喜欢这种方式，因为我有点脱离了 i18n 实践，并根据语言环境创建单独的 JSON 对象，只是为了能够满足单词排序的需要。

example.component.ts

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

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

Answer 1

如果简单地将<div>定义为三部分呢？比如，正文开头，link，然后是结尾。

<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."
}

如果不需要，您只需将开头/结尾留空即可。

Answer 2

Angular 似乎不支持将指令和 none-HTML 元素作为 innerHTML 传递。没试过，但需要注意

您可以将整个句子作为 innerHTML 传递给翻译，其中包括 link 元素。这样就可以动态输出内容了

模板：

<span [innerHTML]="key | translate"></span>

JSON:

{
  "key": "Please click on <a href='abc.com'>this link</a>."
}

Angular i18n 用于包含 routerLink 的文本，需要不同的词序

Angular i18n for text containing routerLink and requires different word order

internationalization

angular-i18n

angular