Angular 9 - 如何延长(区域设置感知周开始)NativeDateAdapter 工作？

Question

为了获得区域设置意识(关于一周的开始) Material DatePicker 我创建了这个扩展:

import { Injectable } from "@angular/core";
import { LOCALE_ID, Inject } from "@angular/core";
import { Platform } from "@angular/cdk/platform";
import { getLocaleFirstDayOfWeek } from "@angular/common";
import { NativeDateAdapter } from '@angular/material/core';

@Injectable({providedIn: 'root'})
export class LocaleDateAdapter extends NativeDateAdapter {
  constructor(@Inject(LOCALE_ID) public locale: string) {
    super(locale, new Platform());
  }

  getFirstDayOfWeek() {
    return getLocaleFirstDayOfWeek(this.locale);
  }
}

我还尝试使用 0 args 构造函数并不断重新调整 1 作为一周的第一天。有同事告诉 {providedIn: 'root'}可能有帮助 - 它没有。
我把它卡在 app.module.ts作为提供者:

{
  provide: DateAdapter,
  useClass: LocaleDateAdapter
}

我的 DatePicker 设置如下:

<mat-form-field appearance="fill">
  <mat-label>set date</mat-label>
  <input matInput [matDatepicker]="picker1" (dateChange)="onDateChange($event)" [formControl]=formDate>
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker [startAt]="filter.date"  #picker1></mat-datepicker>
</mat-form-field>

问题是我的 LocaleDateAdapter 没有实例化(断点没有命中)，并且一周的开始没有改变 - 应该改为星期一。
如何让它发挥作用？

Answer 1

我准备了一些stackblitz .
我做的和你做的差不多。然而主要区别(我想这就是问题所在，为什么它对你不起作用)是，你如何提供 platform .NativeDateAdapter需要您可以通过@Inject(PLATFORM_ID) 注入(inject)的平台ID 作为第二个参数这确保了 Angular 的 DI 提供了正确的平台 ID。

export class CustomDateAdapter extends NativeDateAdapter {
  constructor(
    @Inject(LOCALE_ID) public locale,
    @Inject(PLATFORM_ID) platformId
  ) {
    super(locale, platformId);
  }

getFirstDayOfWeek的执行和你一样好。
注意:在我的示例中 AppModule我强制使用 LOCALE_ID德国的值(value)，所以 de .您也可以使用例如覆盖它 en-US .你还需要注释掉然后 registerLocaleData或者只是删除整个提供程序。那么您应该将其视为星期天的第一天。
为什么你的构造函数没有被执行有点可疑。我的猜测是这与您的模块结构有关。