Перевод кастомных пакетов angular

Если вы хотите перевести компоненты материала, такие как пагинатор материалов, вам не удастся расширить некоторые классы.

Итак, для пагинатора вам нужно расширить класс под названием MatPaginatorIntl.

Поскольку мы хотим использовать нашу службу пользовательского перевода с ее реестром и загрузчиком, мы обычно расширяем TranslationBase. Из-за ограничений TypeScript невозможно расширить / унаследовать более одного класса в одном классе. Итак, теперь мы хотим сгенерировать интерфейс, который описывает требования нашей базы переводов. Этот интерфейс требует реализации id и метода getTranslation, который вернет объект перевода.

После этого мы готовы реализовать класс, который расширяет MatPaginatorIntl и реализует интерфейс перевода.

Обычно метки пагинатора выводятся только один раз. Поэтому мы должны распространять это на каждое изменение языка или перевода. Этого можно достичь, подписавшись на события onLangChange и onTranslationChange, где мы можем просто уведомить changes-subject, предоставленный MatPaginatorIntl и переназначьте свойства метки.

Итак, наш окончательный код выглядит следующим образом:

Наконец, мы хотим, чтобы наш настраиваемый MatPaginatorIntl использовался. Все, что нам нужно сделать для этого, - это импортировать MatPaginatorModule и переопределить поставщика по умолчанию.

Заключение

На мой взгляд, расширять эти классы неудобно, но это довольно быстро и легко понять, как переводить материальные компоненты, которые поставляются в собственном переводе и при этом сохраняют преимущества базового ngx-translate . Многоязычный!

Особая благодарность Томасу Себастьяну Йенсену, который предоставил мне отзыв.

Не стесняйтесь оставлять отзывы.