typescript - 当 Moment 区域设置改变时，Angular Material 日期选择器不更改

详情：使用 moment.js 的 Angular Material 7 日期选择器

问题：当我的网页应用程序的语言更改时，日期选择器的语言环境不会改变。

期望结果：每次我在应用程序中更改语言时，我的日期选择器也应该更改为该地区的格式和语言。目前，我需要在 dd/MM/yyyy 和 MM/dd/yyyy 之间切换。

有人能指引我正确的方向吗？我对 moment 很陌生，似乎无法正确完成格式化。

代码：

HTML

<mat-form-field>
  <mat-label>From date</mat-label>
  <input name="fromDate" [min]="minDate" [max]="maxDate" [formControl]="displayFromDate" 
                     matInput [matDatepicker]="fromDatePicker">
  <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
  <mat-datepicker #fromDatePicker disabled="false"></mat-datepicker>
</mat-form-field>

我一些用于更改 moment 本地设置的翻译服务代码：lang 参数将是 'en' 或 'fr'，并且由应用监听的开关来切换。

public use(lang: string): void {
  this._currentLang = lang;
  moment.locale(lang);      
  this.currentLang$.next(this.currentLang);
}

App.module.ts

import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';

import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';

import localeFr from '@angular/common/locales/fr';
import localeEn from '@angular/common/locales/en';

registerLocaleData(localeFr);
registerLocaleData(localeEn);

...

imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,

...

{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },],

使用日期选择器的组件代码：

this.translationService.currentLang$.subscribe(currentLang => {      
  this.displayFromDate = new FormControl({ value: moment(this.displayFromDate.value).format(), disabled: true });
  console.log('displayFromDate', this.displayFromDate);
});

答案＃1

我在 Angular 文档中错过了这一点。如果其他人也在寻找相同的信息，请确保你使用数据适配器来设置你的语言环境。

constructor(private adapter: DateAdapter<any>) {}

toggleLocale() {
  this.adapter.setLocale(moment.locale());
}

答案＃2

你可以使用可选的布尔参数“ignoreCache”来调用 moment.tz.guess()。如果设置为 true，缓存将被忽略并被新值覆盖。

Moment 文档 URL - https://momentjs.com/timezone/docs/#/using-timezones/guessing-user-timezone/

工作示例 - https://codesandbox.io/s/material-date-locale-jyylz