Комментарии 10
В Angular Light можно изящней сделать, вместо
<div>{{'HELLO' | translate}}</div>
например так: <div>{{^ HELLO}}</div>
(текст без кавычек и «директива» одним символом), пример jsfiddle, при этом нагрузка на dirty-checking не идет в отличие от ангуляра (как минимум первого).Ситуация с встроенной локализацией остается печальной с момента релиза (полгода уже?), я бы пока никому не советовал с ней связываться.
Кроме того, идея компилировать приложение для каждой локализации лично мне кажется слишком ограниченной. До сих пор нет возможности переводить из кода, можно только в шаблоне. Поддержка в angular-cli также хромает.
1-ый способ мне не понравился, т.к. там xml (размер файла, структура файла предполагает лишнюю информацию), пробывать не стал
ng2-translate способ не понравился тем, что там мешает кеширование браузера. При обновлении словаря, файлы из папки i18n в формате json кешируются и у клиента моут обновиться только спустя какое то время. ( возможно можно настроить, что бы в продакшене так же приписывать к названию файлов guid)
использую другой translate чуть модифицированный (что бы можно было использовать в shared module)
https://github.com/AtnagulovID/Angular-2-CLI-Learn-project/tree/master/src/app/_translate (откуда взял не помню, но кода меньше чем в ng2-translate это во первых и в файлы переводов тоже идут как часть приложения в продакшене на angular cli, так что нет проблем с кешированием браузеров)
atnagulovid.myjino.ru — тут можно посмотреть как работает (приложение само ниочем, создается во время изучени я angular 2 )
ng2-translate способ не понравился тем, что там мешает кеширование браузера. При обновлении словаря, файлы из папки i18n в формате json кешируются и у клиента моут обновиться только спустя какое то время. ( возможно можно настроить, что бы в продакшене так же приписывать к названию файлов guid)
использую другой translate чуть модифицированный (что бы можно было использовать в shared module)
https://github.com/AtnagulovID/Angular-2-CLI-Learn-project/tree/master/src/app/_translate (откуда взял не помню, но кода меньше чем в ng2-translate это во первых и в файлы переводов тоже идут как часть приложения в продакшене на angular cli, так что нет проблем с кешированием браузеров)
atnagulovid.myjino.ru — тут можно посмотреть как работает (приложение само ниочем, создается во время изучени я angular 2 )
А как быть если словарь храниться в базе данных? Использовать еще 1 сервис для перевода из базы в файл?
Сам некогда искал способ, но ничего в то время не нашел. В итоге пришлось грузить вюхи из сервера (написаном на .Net), что несет за собой дополнительные запросы, но кэш работает на ура + при смене языка надо перегружать страницу, а сам язык ходил вместе с куки (так сервер знал что вернуть). И еще 1 минус такого подхода, требуется настройка для бандла, а использовал я SystemJs + Gulp
Сам некогда искал способ, но ничего в то время не нашел. В итоге пришлось грузить вюхи из сервера (написаном на .Net), что несет за собой дополнительные запросы, но кэш работает на ура + при смене языка надо перегружать страницу, а сам язык ходил вместе с куки (так сервер знал что вернуть). И еще 1 минус такого подхода, требуется настройка для бандла, а использовал я SystemJs + Gulp
Для xlf-формата есть много софта, который помогает мержить и обновлять файлы. Я использовал Virtaal и это было удобно, программа достаточно успешно вылавливала измененные фразы и показывала предыдущий вариант перевода.
Но у нативного i18n есть большие проблеми с plural, фраза заменяется на пустой тег, т.е нужно задавать дополнительный контекст или выдумывать что-то еще.
Если нужно получить фразу в коде, то можно использовать вот такой хак: забирать фразу из шаблона во время выполнения кода.
Сторонние либы неплохо справляются с задачами, ну и если нужен какой-то специфический функционал, то всегда можно реализовать его самому. При этом у меня есть уверенность, что нативная система будет доработана и ее использование не будет вызывать столько проблем.
Но у нативного i18n есть большие проблеми с plural, фраза заменяется на пустой тег, т.е нужно задавать дополнительный контекст или выдумывать что-то еще.
Если нужно получить фразу в коде, то можно использовать вот такой хак: забирать фразу из шаблона во время выполнения кода.
Сторонние либы неплохо справляются с задачами, ну и если нужен какой-то специфический функционал, то всегда можно реализовать его самому. При этом у меня есть уверенность, что нативная система будет доработана и ее использование не будет вызывать столько проблем.
Пробовал завести Angular2 i18n, все сыпалось с ужасными ошибками. Видимо, он еще не очень дружит с Angular Universal. Пришлось использовать старый, добрый, знакомый с первого Angular'a ng-translate. Кстати, не знаю у кого как, но вечные замечания от мереджеров/UX типа: «тут надо запятую поставить», «тут с большой буквы», «не хватает перевода, пожалуйста добавь» у меня вызывают нервный тик.
Поэтому я заэкстендил [translate] директиву, чтобы она добавляла маленькую кнопку к тексу, чтобы можно было перевести все и записать изменения прямо на сервер. Единственный недостаток, что при редеплое все изменения могут быть потеряны, но я всем объяснил, чтоб сохраняли *.json c переводами и отсылали его по почте.
Кстати, кому-нибудь интересен данный подход?
PS: естественно этот код даже не подключается в продакшне.
Поэтому я заэкстендил [translate] директиву, чтобы она добавляла маленькую кнопку к тексу, чтобы можно было перевести все и записать изменения прямо на сервер. Единственный недостаток, что при редеплое все изменения могут быть потеряны, но я всем объяснил, чтоб сохраняли *.json c переводами и отсылали его по почте.
Кстати, кому-нибудь интересен данный подход?
PS: естественно этот код даже не подключается в продакшне.
0
, 1
, 2
, few
, other
и всё?
Куда-то затерялась еще одна категория: many
. В арабском, например 5-ю категориями не обойтись.
А можно ли как-то перевести заголовок страницы, то есть тэг title? Хочется к нему просто добавить директиву i18n, но компилятор удаляет её (используется AoT). Хотя CLI включает эту строку в перевод…
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Интернационализация (i18n) в Angular 2