Question

如何在整个应用程序中切换我的材料日期采集器的语言（例如，对于急切和延迟加载的组件中的日期选择器）？

我创建了一个展示我的问题的stackblitz示例：

只要在热切或延迟加载的组件中更改语言，我就想更改两个日期选择器的语言。不幸的是，这还不行。

我怎样才能做到这一点？

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);
    }

对于组件之间的同步问题，我建议一个   注入应用程序根目录的服务，用于保存您的语言环境   一个observable和日期适配器将从中读取值   可观察的并且相应地格式化日期。我稍后会看一下也难以在stackblitz上进行同步：D   here已更改您的示例，我希望它能让您了解如何同步我未设法的服务，以使appLocale const成为可注入的服务。原因NativeDateAdapter构造函数对材质设计有一些依赖关系，并且您的类不可注入，您可以将它们更正为角度服务，并将所有参数与observable一起注入并在构造函数中进行订阅。

请看一下我希望这是你需要的。

Answer 2

基本上我明白你想要在组件之间共享数据，一种解决方案是使用服务。

此外，您可以使用 localStorage 来存储您的语言环境，当它在一个组件中更新时，当另一个组件加载时，您可以搜索“语言环境”＆＃39;在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'));
 }
}

我认为这有助于满足您的要求。

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

2 个答案: