Angular 材质：无法使用 dateAdapter 更改 datePicker 中的 matDateLocale

Question

我有一个 Angular 18（独立）项目，我在其中使用 DatePicker。 我需要动态地改变语言。 为此，我使用注入 DateAdapter 的服务，如下所示：

export class MyService {
  #dateAdapter = inject(DateAdapter);
  ...
  set locale(locale: 'en' | 'de') {
    this.locale = locale;
    console.log('Before: ' + this.#dateAdapter);
    this.#dateAdapter.setLocale(this.locale);
    console.log('After: ' + this.#dateAdapter);
  }
  ...
}

启动服务后，我将语言环境更改为德语，我在日志中看到：

Before: _NativeDateAdapter {... _matDateLocale: 'en-US', locale: 'en-US'}
After:  _NativeDateAdapter {... _matDateLocale: 'en-US', locale: 'de'}

_matDateLocale（由 DatePicker 使用）仍然是英文！ 日历显示有英文标签。 我怎样才能改变这个内部 matDateLocale 呢？

我也尝试注入服务 LOCALE_ID 和 MAT_DATE_LOCALE，但没有任何变化：

  set locale(locale: 'en' | 'de') {
    this.locale = locale;
    console.log('Before: ' + this.#dateAdapter);
    this.#dateAdapter.setLocale(this.locale);
    this.#localeId = this.locale
    this.#matDateLocale = this.locale
    console.log('After: ' + this.#dateAdapter);
  }

我的app.config是这样的：

  providers: [
    ...,
    {
      provide: DateAdapter,
      useClass: NativeDateAdapter
    },

我也尝试过：

  providers: [
    ...,
    { provide: MAT_DATE_LOCALE, useValue: 'en'},
    {
      provide: DateAdapter,
      useClass: NativeDateAdapter,
      deps: [MAT_DATE_LOCALE],
    },

在这种情况下，matDateLocale 始终保持“en”。

我也尝试过使用registerLocaleData(localeDE)，但无济于事。 我不可能更改内部 matDateLocale，起始值不会更改。

这让我发疯。 我遵循了这里找到的许多不同的例子，但没有成功。

Answer 1

根据文档，仅支持英语区域设置 - 选择日期实现和日期格式设置 - Angular Material 文档

提供NativeDateAdapter或MatNativeDateModule

支持的区域设置 - en-US

---

而是选择

MatDateFnsModule

或

MatLuxonDateModule

或

MatMomentDateModule

，它支持多个区域设置。

工作演示供参考