Расширить предопределенные угловые форматы каналов дат, используя только месяц с локализованным форматом года (например, 05/2020 для ‘en’ или 05.2020 в локализации ‘de’).

#angular #date-pipe

#angular #дата-канал

Вопрос:

Мне нужно расширить список предопределенных форматов угловых каналов дат (вы можете увидеть его здесь) форматом, который состоит только из месяца с годом, например, 05/2020 для ‘en’ или 05.2020 для ‘de’, которые должны быть локализованы. Есть ли какой-нибудь правильный способ сделать это? Я знаю, что можно создать свой собственный канал и расширить его с помощью некоторого необходимого формата, но когда я указываю формат, например, ‘MM / yyyy’, он будет форматировать каждую дату для каждой локали в этом формате, но мне нужно его локализовать, поэтому мне нужно добавить свое пользовательское форматирование к уже существующемуфункциональность.

У меня есть идея сделать это с moment.js и чтобы не использовать угловой канал даты, другая идея состоит в том, чтобы вручную удалить день из строки, которая уже была локализована (я согласен, довольно глупая идея), но на самом деле у меня заканчиваются идеи.

Есть простой способ? или здесь должен быть определен другой подход?

Ответ №1:

У меня была эта проблема, самым простым решением, которое я нашел, было создать общий метод обслуживания, который возвращает строку формата даты по локализации

 getDateFormat(format?: 'full' | 'short'): string {
        if (format === 'full') {
            return this.translateService.currentLang === 'en'
                ? 'MMM dd, yyyy, HH:mm:ss'
                : 'dd. MMM yyyy, HH:mm:ss';
        }
        if (format === 'short') {
            return this.translateService.currentLang === 'en'
                ? 'MMM dd, yyyy'
                : 'dd. MMM yyyy';
        }
    }
  

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

 getDateFormat(): string {
  return this.translateService.currentLang === 'en' 
    ? 'MMM dd, yyyy, HH:mm:ss'
    : 'dd. MMM yyyy, HH:mm:ss';
)
  

Обновить:

Поскольку у меня больше опыта, я хотел бы поделиться немного другим подходом к ситуациям, когда у вас более нескольких языков:

 getDateFormat(): string {
  const formatsByLocale = {
    'en': 'MMM dd, yyyy, HH:mm:ss'
  }
  const format = formatsByLocale[this.translateService.currentLang]
  return format || 'dd. MMM yyyy, HH:mm:ss';
)
  

Идея в том, что вы могли бы содержать много разных языков с разными форматами и получать доступ к тем, которые имеют одно и то же свойство currentLang, без указания языка. На мой взгляд, это делает его более пригодным для повторного использования и читаемым.
Кстати || , символ предназначен для случаев, когда формат отсутствует, он будет использовать формат по умолчанию, независимо от того, что идет после этого символа.

Комментарии:

1. Вместо проверки языка пользователей можно также поместить в их файлы translations json формат даты, который они ищут. Затем используйте эту строку в переведенном канале. Это дало бы им возможность переформатировать формат даты на основе языка пользователя без какой-либо логики и просто позволить службе перевода angulars выполнить всю работу за вас, используя this.TranslateService.instant(‘path.to.date.format’)