延迟加载模块中Angular Material datepicker的语言切换

Question

如何在整个应用程序中切换我的材料瞄准器的语言(即对于急切和延迟加载的组件中的datepickers)？

我创建了一个stackblitz示例来演示我的问题:

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 构造函数对材料设计有一些依赖性，并且您的类不可注入，您可以将它们更正为角度服务，并将所有参数与可观察的一起注入，并在构造函数中进行订阅。

请看一下我希望这就是您所需要的。