Angular2 i18n в этот момент?

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

https://github.com/angular/i18n

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

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

Ответ 1

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

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

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

package.json

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

npm run i18n

Подробнее о слиянии перевода с шаблоном компонента см. в разделе Merge translation. Это было сделано с использованием 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 файлы не используются напрямую; a .ts файл создается вручную, чтобы обернуть содержимое xlf в экспортируемой переменной. Я думаю, это должно работать автоматически в финальном выпуске (возможно, даже сейчас).

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

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

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

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

i18n: переводы слияния 7a8ef1e

В Angular 2 RC5

был добавлен большой фрагмент i18n

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

Ответ 2

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

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

Ответ 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

Ответ 4

Я нашел другой способ реализовать это, используя pipe и service

HTML

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

TYPESCRIPT

...

// "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

Ответ 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/

Ответ 6

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

Я читал о людях, жалующихся на производительность, из-за труб, но, читая проблемы github, кажется, что он становится разрешенным.
Только для i18n или Translations он не занимается i10n или локализацией
Существует несколько предупреждений об ошибках с Angular4, но он работает в любом случае

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

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