代码之家  ›  专栏  ›  技术社区  ›  René Winkler

延迟加载模块中角度材质日期选择器的语言开关

  •  8
  • René Winkler  · 技术社区  · 6 年前

    如何在整个应用程序中切换材质日期选择器的语言(即,对于急切和延迟加载的组件中的日期选择器)?

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

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

    一旦在急切加载或延迟加载的组件中更改了语言,我就要为这两个日期选择器更改语言。不幸的是,这还不起作用。

    我怎样才能做到这一点?

    2 回复  |  直到 6 年前
        1
  •  1
  •   Nicu    6 年前

    我纠正了你在stackblitz上的例子,显示dormat是 对象不是您的区域设置格式,您可以访问 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上进行同步 here 您的示例是否已更改,我希望它能让您了解如何同步我未能使applocalecost成为可注入服务的服务的服务。因为NativeDateAdapter构造函数有一些依赖于材质设计,而您的类是不可注入的,您可以将它们更正为角度服务,并将所有参数与Observable一起注入,并在构造函数中进行订阅。

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

        2
  •  -1
  •   Avinash    6 年前

    基本上我了解的是,您希望在组件之间共享数据,一种解决方案是使用 服务

    你也可以用 本地存储 要在一个组件中更新区域设置并加载另一个组件时存储您的区域设置,您可以在本地存储中搜索“区域设置”并在 恩戈尼特() 那部分的。

    根据你的例子,你能做的是- 在里面 应用组件 在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中让类实现 奥尼特

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

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