Угловой i18n для текста, содержащего routerLink и требует другого порядка слов - PullRequest
Новая
       36

Угловой i18n для текста, содержащего routerLink и требует другого порядка слов

0 голосов
/ 12 декабря 2018

Я изо всех сил пытаюсь найти наиболее эффективный способ перевести текст, содержащий 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>

Проблема этого подхода заключается в том, чторазные языки могут иметь слова в другом порядке.Например. «Пожалуйста, нажмите на эту ссылку» на другом языке может иметь порядок, где " ссылка " в начале или всередина предложения.

Существует ли какой-либо общий / официальный подход для решения этой ситуации?

Один из способов, которым я мог бы решить это, - получить текущую локаль в компоненте, а затемсделайте проверку 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>

1 Ответ

0 голосов
/ 12 декабря 2018

Что если вы просто определите <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."
}

И вы просто оставляете начало / конец пустым, если в этом нет необходимости.

...