Angular Material предоставляет множество компонентов для создания многофункциональных приложений с использованием Material Design. Один из них - MatPaginator для управления страницами списков или таблиц. Кроме того, он содержит метки, информирующие пользователя о текущей странице или диапазоне отображаемых элементов. Проблема возникает, когда разработчик пытается перевести вышеупомянутые фрагменты информации с помощью самой популярной библиотеки на перевод для Angular - @ ngx-translate. Пакет основан на асинхронном переводе с своевременным изменением выбранного языка с использованием RxJS Observables. С другой стороны, MatPaginatorIntl - сервис с переводом пагинатора - хранит ярлыки как string тип. В статье я представляю вам, как переводить нереактивные компоненты и оставаться реактивными!
В официальном руководстве читаем, что метки для пагинатора можно настроить, предоставив собственный экземпляр MatPaginatorIntl в виде набора строк, поэтому пример службы может выглядеть так:
Для начала нам нужно создать метод для получения собственных переводов. Для этого мы вводим TranslateService внутрь конструктора, а затем извлекаем необходимые метки в созданном методе, используя get из внедренной службы. Наконец, мы подписываемся на возвращаемый Observable и назначаем переводы.
Следующим шагом является перевод метки диапазона, созданной методом getRangeLabel. Обычные случаи представляют собой перевод только of слов и конкатенацию внутри метода, и это правильно. Проблема возникает, когда мы используем более сложный перевод, например. Представлено 10–20 товаров из 100. В этом случае нам нужно хранить все переводы для одной метки. Вместо этого мы можем использовать один перевод, например. Presented {{start}} — {{end}} of {{length}} products и интерполировать его, используя TranslateParser, предоставленный библиотекой переводчика.
В некоторых приложениях есть возможность изменить язык. Чтобы справиться с этим в нашем случае, нам нужно изменить get на метод stream, который возвращает новое значение при изменении языка. Хотя наш сервис будет предоставляться в корне, не забудьте отказаться от подписки на поток с новыми значениями, чтобы избежать утечек памяти, например. в тестах.
