Angular2 i18n на данный момент?

Question

Мы решили сделать это и начали новый проект с использованием Angular2. Пока все хорошо, но на данный момент мы сталкиваемся с проблемой. На данный момент, каков правильный подход к i18n для Angular2? Мы немного исследовали и нашли это:

• https://github.com/angular/i18n

Однако последний коммит более 5 месяцев... Не похоже на активное развитие.

Кто-нибудь пробовал использовать angular-translate или angular-gettext? Или, может быть, с Angular2 лучше обернуть что-нибудь JS, например, i18next? Кто-нибудь может поделиться своими мыслями? Может быть, вы столкнулись с той же проблемой?

Answer 1

Plunk был обновлен до Angular 2 Final: https://plnkr.co/edit/4euRQQ. Вещи, кажется, работают так же, как в RC7.

Новый раздел i18n был добавлен в официальную документацию Angular 2. В основном, это объясняет в деталях, что происходит в plunkr выше.

XLIFF является единственным форматом для переводов, без поддержки JSON. Исходный файл перевода (xliff, xlf) должен быть создан с помощью инструмента ng-xi18n:

package.json:

"scripts": {
  "i18n": "ng-xi18n", 
  ...
}

а также

npm run i18n

См. Раздел Перевод слияния для получения подробной информации о слиянии перевода в шаблон компонента. Это делается с помощью плагина SystemJS Text.

Еще один пример использования Gulp http://www.savethecode.com/angular2-i18n-native-support/

Пожилые сотрудники: обновление на основе RC7 и ссылок, предоставленных Германом Франсеном:

Я сделал минимальный пример Plunkr: https://plnkr.co/edit/4W3LqZYAJWdHjb4Q5EbM

Комментарии к plunkr:

• bootstrap должен обеспечить TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID со значениями -> настройка переводов
• переводимые элементы в html-шаблонах должны использовать директиву i18n
• переводы хранятся в .xlf файл. Связь между языками осуществляется через Id, связывает с html значением <source> отметить в xlf
• В настоящее время xlf файлы не используются напрямую; .ts файл создается вручную, чтобы обернуть содержимое xlf в экспортируемой переменной. Я думаю, это должно работать автоматически в финальной версии (возможно, даже сейчас).

Это первый официально документированный подход, который я нашел. Тем не менее, это все еще едва ли можно использовать. Я вижу следующие проблемы в текущей реализации:

• Язык установлен на bootstrap не может изменить его во время выполнения. Это должно быть изменено в финале.
• Идентификатор переводимого элемента в xlf генерируется SHA. Текущий способ получить этот идентификатор немного запутан: вы создаете новый переводимый элемент, используете его, копируете идентификатор SHA из ошибки и вставляете в свой i18n.lang.xlf файл.

Существует большой запрос на документацию, касающийся i18n

Пожилые сотрудники: заметки о выпуске https://github.com/angular/angular/blob/master/CHANGELOG.md есть запись

i18n: объединить переводы 7a8ef1e

Большой кусок i18n был представлен в Angular 2 RC5

К сожалению, до сих пор нет документации.

Answer 2

Все стремятся к официальной реализации, но этот работал для моего варианта использования: https://github.com/ocombe/ng2-translate

README довольно тщательный, и если вам нужно что-то конкретное (для меня это было разделение кода), сам код не слишком длинный или трудный для чтения.

Answer 3

Поддержка i18n теперь официальная в Angular 2 RC6

Официальный релиз блога:
https://angularjs.blogspot.nl/2016/09/angular-2-rc6_1.html

Образец интернационализации с Angular 2 RC6
https://github.com/StephenFluin/i18n-sample

Подробнее о том, как работает новая концепция i18n в angular2:
https://lingohub.com/blog/2015/03/angular-2-i18n-update-ng-conf-2015

Answer 4

Я нашел другой способ реализовать это с помощью pipe а также service

HTML

<!-- should display 'hola mundo' when translate to Spanish -->
<p>{{ 'hello world' | translate }}</p>

МАШИНОПИСЬ

...

// "this.translate" is our translate service
this.translate.use('es'); // use spanish

...

// should display 'hola mundo' when translated to Spanish
this.translatedText = this.translate.instant('hello world'); 

...

https://scotch.io/tutorials/simple-language-translation-in-angular-2-part-1 https://scotch.io/tutorials/simple-language-translation-in-angular-2-part-2

Answer 5

Официальная поддержка i18n в Angular.io здесь:

https://angular.io/docs/ts/latest/cookbook/i18n.html

Но! Как упомянуто в документах:

Вам необходимо создать и развернуть отдельную версию приложения для каждого поддерживаемого языка!

Это делает эту функцию бесполезной в большинстве случаев...

Если вы не будете использовать его без CLI, как описано здесь:

https://devblog.dymel.pl/2016/11/03/angular2-and-i18n-translate-your-app/

Answer 6

Я собираю POC, и официальная документация по меньшей мере громоздка, поэтому я попробовал ngx-translate http://www.ngx-translate.com/ и я буквально заставил hello world работать за несколько минут, есть несколько предостережений:

1. Я читал о людях, жалующихся на производительность из-за каналов, но, читая проблемы с github, кажется, что это решается
2. Это только для i18n или Переводов, это не имеет дело с i10n или Локализацией
3. Есть несколько ошибок предупреждения с Angular4, но он работает в любом случае

Короче говоря, мне понравился ngx-translate, если у вас небольшое приложение и вам нужен только перевод

Я лично хотел локализацию, поэтому я смотрю на https://github.com/robisim74/angular-l10n. Это выглядит довольно хорошо, но я не проверял, поэтому я дам вам знать позже, или вы, ребята, можете пойти, и мы все попробуем