Angular 9 - jak uzyskać rozszerzenie (początek tygodnia z uwzględnieniem lokalizacji) NativeDateAdapter działa?

Question

Aby zapoznać się z lokalizacją (w odniesieniu do początku tygodnia) Material DatePicker, stworzyłem to rozszerzenie:

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

Próbowałem też z konstruktorem 0 args i ciągle dostrajałem 1 jako pierwszy dzień tygodnia. Jakiś kolega powiedział, że to {providedIn: 'root'}może pomóc - nie pomogło.

Podłączyłem go app.module.tsjako dostawca:

{
  provide: DateAdapter,
  useClass: LocaleDateAdapter
}

mój DatePicker jest skonfigurowany w następujący sposób:

<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>

Problem polega na tym, że mój LocaleDateAdapter nie jest tworzony (punkt przerwania nie został trafiony), a początek tygodnia się nie zmienia - powinien zmienić się na poniedziałek.

Jak to działa?

Answer 1

Przygotowałem stackblitz .

Zrobiłem mniej więcej to samo, co ty. Jednak główna różnica (i myślę, że na tym polega problem, dlaczego to nie działa) polega na tym, w jaki sposób udostępniasz plik platform.

Na NativeDateAdapterpotrzeby jako drugi argument id platforma które można wstrzykiwać przez @Inject(PLATFORM_ID)Daje to pewność, że prawidłowe id platforma jest świadczone przez DI kątowej jest.

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

Wdrożenie getFirstDayOfWeekjest w porządku, tak jak ty.

Uwaga: w moim przykładzie w AppModulezmuszam do użycia jako LOCALE_IDwartości dla Niemiec, więc de. Możesz również nadpisać go np en-US. Musisz wtedy również skomentować registerLocaleDatalub po prostu usunąć całego dostawcę. wtedy jako pierwszy dzień tygodnia powinieneś zobaczyć niedzielę.

To, dlaczego twój konstruktor nie jest wykonywany, jest trochę podejrzane. Domyślam się, że ma to coś wspólnego ze strukturą modułu.