Сообщение Angular 2 i18n с тегом HTML внутри

Я пытаюсь перевести свое приложение, используя официальную реализацию i18n angular 2: https://angular.io/guide/i18n и я пытаюсь перевести какое-то сообщение с HTML внутри (скажем так, иконки с потрясающим шрифтом).

Например это:

<p i18n="instagram-widget.instagram|Instagram name in the foot gallery @@instagramInstagramWidget"
  class="text-muted text-center">
  <i class="fa fa-instagram fa-lg mx-1" aria-hidden="true"></i> 
  Instagram
</p>

когда я создаю файл перевода с помощью ng xi18n или ./node_modules/.bin/ng-xi18n, я получаю следующую единицу перевода.

<x id="START_ITALIC_TEXT" ctype="x-i"/><x id="CLOSE_ITALIC_TEXT" ctype="x-i"/> Instagram

Я создаю файл перевода для языкового стандарта es, и когда я обслуживаю свое приложение с использованием нового языкового стандарта, значок font awesome отсутствует, отображается только текст instagram.

Эта проблема возникает с любыми вложенными тегами HTML, в которые переводится родительский элемент.


angular internationalization angular-i18n angular2-aot angular-aot
person nastrand    schedule 24.07.2017    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Я предполагаю, что в приведенном примере вы хотите перевести слово «Instagram». Если это так, у вас есть два варианта согласно документации:

  • Вы можете заключить загружаемый текст в тег ng-container

<p class="text-muted text-center"> <i class="fa fa-instagram fa-lg mx-1" aria-hidden="true"></i> <ng-container i18n="instagram-widget.instagram|Instagram name in the foot gallery @@instagramInstagramWidget"> Instagram <ng-container> </p>

  • Вы можете заключить переводимое слово в комментарий следующим образом:

<p class="text-muted text-center"> <i class="fa fa-instagram fa-lg mx-1" aria-hidden="true"></i> <!-- i18n: instagram-widget.instagram|Instagram name in the foot gallery@@instagramInstagramWidget --> Instagram <!--/i18n--> </p>

person Nacho GlezBull    schedule 08.08.2017
comment
Мне кажется, что есть несоответствие между заголовком этой беседы и ответами. Что делать, если у меня более длинный текст и я хочу добавить разрывы строк (например, <br>)? Как лучше всего выполнять эти переводы? - person Jeppe; 23.04.2020

arrow_upward
1
arrow_downward

Проблема была связана с переводчиками, которые я использовал.

Переводчики удаляют теги-заполнители () и оставляют только простой текст. Я вручную просматривал все строки переводов и добавлял заполнители, где они были изначально.

Angular использует эти заполнители, чтобы переводчики не изменяли ваши HTML-теги по ошибке. В процессе перевода angular возьмите эти теги-заполнители и замените их на исходные теги в представлении (https://github.com/angular/angular/issues/18302)

Я не могу найти (пока) инструмент перевода, который не удаляет эти заполнители

person nastrand    schedule 08.08.2017

arrow_upward
0
arrow_downward

вы можете обернуть это тегом.

 <p class="signupLink">
    <span i18n="@@loginPageNewAtProof">New at Proof?</span>
    <span i18n="@@loginPageSignupHereProof"><a routerLink="/signup">Signup here</a></span>
  </p>

тогда

  <trans-unit id="loginPageNewAtProof" datatype="html">
      <source>New at Proof?</source>
      <target>Nouveau chez Proof?</target>
</trans-unit>

<trans-unit id="loginPageSignupHereProof" datatype="html">
      <source>Signup here</source>
      <target>Inscrivez-vous ici</target>
</trans-unit>
person dheeraj kumar    schedule 19.03.2019