Переключатель языка для DatePicker Angular Material в лениво загруженном модуле

Question

Как я могу переключить язык моих сборщиков дат во всем приложении (т. Е. Для сборщиков дат в загружаемых и загружаемых компонентами компонентах)?

Я создал пример стекаблица, демонстрирующий мою проблему:

https://stackblitz.com/edit/angular-4cu4cb

Как только язык будет изменен в загруженном или лениво загруженном компоненте, я хотел бы изменить язык для обоих средств выбора даты.К сожалению, это еще не работает.

Как мне этого добиться?

Answer 1

Я исправил ваш пример в stackBlitz. Кажется, displayDormat - это объект, а не формат вашей локали, вы можете получить доступ к this.locale в адаптере, чтобы иметь правильный формат для дат.

if (this.locale === 'myCustomFormat') {      
      const day = date.getUTCDate();
      const month = date.getUTCMonth() + 1;
      const year = date.getFullYear();

      // Return the format as per your requirement
      return `${day}.${month}.${year}`;
    } else {
      // Refer to the standard formatting of the NativeDateAdapter.
      return super.format(date, displayFormat);
    }

Для проблемы синхронизации между компонентами я предложу сервис, внедренный в корень приложения, который удерживает ваш языковой стандарт в наблюдаемой, а адаптер даты будет считывать значение из этой наблюдаемой и форматировать дату по необходимости.Позже я посмотрю, как трудно выполнить синхронизацию на stackblitz: D здесь - это ваш пример изменен, и я надеюсь, что он даст вам представление о том, как синхронизировать сервисы, которые мне не удалосьсделать appLocale const сервисом для инъекций.Причина Конструктор NativeDateAdapter имеет некоторые зависимости от дизайна материала, и ваш класс не подлежит инъекции. Вы можете исправить их, чтобы они были угловыми службами, внедрить все ваши параметры вместе с наблюдаемым и сделать подписку в конструкторе.

Пожалуйста, посмотритеЯ надеюсь, что это то, что вам нужно.

Answer 2

По сути, я понял, что вы хотите обмениваться данными между компонентами. Одним из решений будет использование службы .

. Также вы можете использовать localStorage для храненияВаш языковой стандарт, когда он обновляется в одном компоненте и когда загружается другой компонент, вы можете искать 'locale' в localStorage и обновлять в ngOnInit () этого компонента.

Согласно вашему примеруто, что вы можете сделать, - в app.component.ts , где у вас есть методы french (), italian (), german (), установить языковой стандарт в localStorage:

localStorage.setItem('locale', 'fr'); // if its french()
localStorage.setItem('locale', 'it'); // if its italian()
localStorage.setItem('locale', 'de'); // if its german()

тогда в вашем test.component.ts ваш класс реализует OnInit

export class TestComponent  implements OnInit{ }

// then add ngOnInit() to check if the locale is there and set accordingly.
ngOnInit(){
if(localStorage.getItem('locale')){
  this.adapter.setLocale(localStorage.getItem('locale'));
 }
}

Я думаю, что это поможет удовлетворить ваши требования.