Angular 9 - bagaimana cara diperpanjang (Lokal sadar awal minggu) NativeDateAdapter berfungsi?

Question

Untuk membuat Lokal sadar (sehubungan dengan awal minggu) Material DatePicker saya membuat ekstensi ini:

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

Saya juga mencoba dengan 0 konstruktor args dan terus-menerus melakukan retuning 1 sebagai hari pertama dalam minggu. Beberapa kolega mengatakan itu {providedIn: 'root'}mungkin membantu - ternyata tidak.

Saya mengaitkannya app.module.tssebagai penyedia:

{
  provide: DateAdapter,
  useClass: LocaleDateAdapter
}

DatePicker saya diatur seperti ini:

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

Masalahnya adalah LocaleDateAdapter saya tidak dibuat (Breakpoint tidak mengenai) dan awal minggu tidak berubah - harus berubah menjadi Senin.

Cara membuatnya bekerja?

Answer 1

Saya menyiapkan beberapa stackblitz .

Saya melakukan kurang lebih sama dengan yang Anda lakukan. Namun perbedaan utama (dan saya rasa itulah masalahnya, mengapa ini tidak berhasil untuk Anda) adalah, bagaimana Anda menyediakan file platform.

The NativeDateAdapterkebutuhan sebagai argumen kedua platform id yang dapat Anda menyuntikkan oleh @Inject(PLATFORM_ID)merek ini yakin bahwa id platform yang benar disediakan oleh DI sudut ini.

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

Penerapannya getFirstDayOfWeekbaik-baik saja seperti yang Anda lakukan.

Catatan: dalam contoh saya di AppModuleSaya memaksa untuk menggunakan sebagai LOCALE_IDnilai untuk Jerman, jadi de. Anda juga dapat menggantinya dengan mis en-US. Anda juga perlu memberi komentar registerLocaleDataatau hapus saja seluruh penyedia. maka Anda harus melihat sebagai hari pertama minggu itu Minggu.

Mengapa konstruktor Anda tidak dijalankan agak mencurigakan. Dugaan saya di sini adalah bahwa ini ada hubungannya dengan struktur modul Anda.