Угловой 6 - i18n против ngx-translate
Я работаю над большим проектом, использующим Angular 6. Этот проект нуждается в значительной интеграции i18n. Я пытаюсь принять правильное решение относительно того, как поступить.
Я вижу, что могу выбирать между:
- ngx-translate ( https://github.com/ngx-translate/core)
- Angular i18n ( https://angular.io/guide/i18n)
Я склоняюсь к выбору варианта 2; Angular's i18n. Это потому, что это собственный встроенный пакет Angular, который лучше подходит мне. По-видимому, это также лучше для SEO и немного лучше для производительности без каких-либо обходных путей. Кроме того, теперь он выпущен, я думаю, что ngx-translate может быть устаревшим. Много информации здесь: Angular 5 интернационализация.
Однако вот мои оговорки:
- По-видимому, версия Angular является совершенно новой / все еще догоняющей ( https://github.com/ngx-translate/core/issues/495). Это слишком новое, чтобы взять на себя?
- Очевидно, у меня должна быть отдельная сборка веб-сайта для каждого языка ( https://angular.io/guide/i18n)??? Я действительно не думаю, что это было бы хорошо. Это правильно? или это тот случай, когда файлы шаблона вставляются динамически каждый раз? Я знаю, что с помощью ngx-translate переведенные слова просто сохраняются в файлах.json - мне нравится эта аккуратность. Я не думаю, что мы хотим кучу разных сборок сайтов.
Есть ли способ сделать живое переключение языков с помощью angular i18n? т.е. переключение языка на странице без перезагрузки / повторной загрузки данных с сервера? Это то, что они называют JIT?
Кто-нибудь пробовал https://github.com/robisim74/angular-l10n? выглядит очень хорошо также.
Большое спасибо. С наилучшими пожеланиями.
5 ответов
Это слишком новое, чтобы взять на себя?
Это основано на мнении, и, следовательно, не по теме
Видимо у меня должен быть отдельный сайт
Вам нужно отдельное приложение (т.е. index.html + bundles). Но вы можете обслуживать все эти приложения по одному URL-адресу, решая, какое из них будет обслуживать сервер. Это (надеюсь) изменится с Angular 7, когда будет доступен новый динамический i18n, построенный поверх Ivy.
это тот случай, когда файлы шаблона вставляются динамически каждый раз?
Не уверен, что вы имеете в виду. Переводы локали, для которой вы строите, хранятся в сгенерированных шаблонных классах во время компиляции компилятором Angular AOT.
Есть ли способ сделать живое переключение языков с помощью angular i18n?
Нет, и это не будет возможно со следующей версией i18n. Одно и то же уникальное приложение сможет работать на нескольких языках, но язык все равно придется выбирать при запуске, и вам придется перезапустить приложение, чтобы выбрать другой язык.
Есть ли способ сделать живое переключение языков с помощью angular i18n?
Нет, не эффективно, по крайней мере.
Это то, что они называют JIT?
Нет. JIT-компилятор - это то, что компилирует ваши HTML-шаблоны в JavaScript при запуске в браузере. В производстве вы используете компилятор AOT (который также используется для интеграции переводов в сгенерированные классы JS), который выполняет аналогичную компиляцию шаблонов, но во время сборки, а не во время выполнения.
Обсуждение еще продолжается, и здесь вы можете найти некоторые ответы и мнения, даже непосредственно от разработчиков Angular: https://github.com/ngx-translate/core/issues/495
Лично я бы структурировал приложение на официальном i18n и в конечном итоге добавил в код некоторые выделенные переводы с помощью библиотеки ngx-translate.
Есть ли способ сделать живое переключение языков с помощью angular i18n?
На самом деле, есть. Вам нужно создать другой дистрибутив вашего приложения, но после полного развертывания вы можете переключиться вживую:
Понятно, почему разработчики любят библиотеку типа ngx-translate, чтобы заботиться о интернационализации. В конце концов, это делает нашу жизнь настолько легкой, превращая задачу перевода в отображение 1 на 1. К сожалению, это не так, как это работает с человеческими языками. У одного есть два человека, которые знают более одного языка, чтобы лучше понять недостатки этого подхода.
Вот небольшой пример: скажем, у вас есть приложение для командировочных расходов, у вас есть табличное представление, в котором заголовок одного столбца - "время", указывающее, когда были сообщены расходы. Затем представьте, что в таком приложении у вас есть мини-калькулятор для базовой проверки ваших расходов, в котором есть кнопка умножения x с отложенным сообщением "время". Когда вы делаете ngx-translate, вы извлекаете их обоих с одним и тем же ключом "TIMES", который, в свою очередь, переводчик возвращает вам один перевод. Но первое вхождение "время" не обязательно переводится так же, как и второе, во всех других языках. Взять, к примеру, испанский:
- "два раза три"(как в калькуляторе) -> "дос ПОР трес"
- "ВРЕМЯ РАСХОДА"(как в табличном представлении) -> "TIEMPOS de gasto"
Именно поэтому интернационализация движется в направлении использования более сложного формата, такого как XLF, для поддержки значения, описания (в случае Angular), а не старого стиля JSON с 1 глубиной, который не может быть приспособлен для перевода относительно контекста.
Теперь вы можете утверждать, что это можно решить, зарегистрировав два разных ключа для "времен", которые на английском языке соответствуют одной и той же вещи, но для этого вам, как разработчику, необходимо знать все языки, которые ваше приложение поддерживает при разработке, или вам придется Пройдите еще одну итерацию (время - деньги!), чтобы получить обратную связь с клиентом, а затем добавить отдельный ключ, тогда как если вы предоставите описание и значение для вашего сообщения (текста), то переводчик позаботится об этом за вас, а вы не будете знать о другом. язык (если вы знаете испанский, подумайте о том, насколько сложным это может быть с сослагательными и указательными формами глагола, которые одинаковы в английском, но не в испанском).
Чтобы ответить на ваш другой вопрос "Есть ли способ сделать живое переключение языков с помощью angular i18n?": Да, есть. Посмотрите на эту удивительную статью об управлении состоянием в приложениях. Короче говоря, вам нужно, чтобы ваш клиент и постоянные состояния отображались в URL. Тогда все, что вам нужно сделать, это добавить префикс локали к вашему пути, чтобы ваш веб-сервер дал вам правильную сборку локали. Тогда, каким бы ни было состояние вашего приложения до изменения действия по изменению локали, его можно восстановить из URL(поскольку оно "отражает как постоянное состояние, так и состояние клиента").
Одним из больших преимуществ Angular I18N является то, что его влияние на шаблоны минимально. Вам нужно только добавить атрибут i18n для каждого элемента, который вы хотите локализовать. Так
<p>Hello World<p>
становится
<p i18n>Hello World<p>
Не нужно много менять разметку и не нужно вручную поддерживать файл ресурсов. Если вы используете любую другую библиотеку I18N для Angular или React, вам нужно изменить свою разметку, например:
<p>Translate("Hello World")<p>
и вы должны вручную добавить строку в нейтральный файл ресурсов, такой как
"Hello World": "Hello World"
Затем, если вы хотите изменить строку, вы также должны помнить, чтобы обновить ключ и значение в файле ресурсов.
С Angular I18N вы используете инструмент извлечения для создания и поддержки нейтральных файлов ресурсов.
В настоящее время в Angular I18N отсутствует возможность локализовать строку в исходном коде. Однако эта функция появится в ближайшее время.
Я использую сборку angular в переводе на язык i18n. Как объясняется в этом сообщении в блоге, но я хочу переключить язык по умолчанию, глядя на язык браузера по умолчанию. Если язык моего браузера - французский (fr) и когда я просматриваю свой сайт как https://www.myi18nexample.com, содержимое страницы должно загружаться с французскими языковыми метками / константами / строками. Не могли бы вы подсказать, как я могу этого добиться?