Angular 9 - 如何扩展(本地环境感知周开始)NativeDateAdapter 工作? [英] Angular 9 - how to get extended (Locale aware start of week) NativeDateAdapter working?

问题描述

为了了解语言环境(关于本周开始)Material DatePicker 我创建了这个扩展:

To get a Locale aware (in regards of start of the week) Material DatePicker i created this extension:

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'} 可能会有所帮助 - 它没有.

I also tried with 0 args constructor and constantly retuning 1 as first day of week. Some colleague told that {providedIn: 'root'} might help - it did not.

我在 app.module.ts 中作为提供者钩住了它:

I hooked it in app.module.ts as provider:

{
  provide: DateAdapter,
  useClass: LocaleDateAdapter
}

我的 DatePicker 设置如下:

my DatePicker is set up like this:

<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 未实例化(未命中断点)并且一周的开始未更改 - 应更改为星期一.

The problem is that my LocaleDateAdapter is not instantiated (Breakpoint not hit) and the start of the week isn't changing - should change to Monday.

如何让它发挥作用?

推荐答案

我准备了一些 stackblitz.

我做的和你做的差不多.然而，主要的区别(我想这就是问题所在，为什么它不适合你)是，你如何提供平台.

I did more or less the same what you did. However the main difference (and I guess thats the problem, why it is not working for you) is, how you provide the platform.

NativeDateAdapter 需要将平台 ID 作为第二个参数，您可以通过 @Inject(PLATFORM_ID) 注入该平台 ID，这确保了 Angular 的 DI 提供了正确的平台 ID.

The NativeDateAdapter needs as second argument the platform id which you can inject by @Inject(PLATFORM_ID) This makes sure that the correct platform id is provided by Angular's DI.

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

getFirstDayOfWeek 的实现与您一样.

注意:在我的 AppModule 示例中，我强制使用德国的值作为 LOCALE_ID，所以 de.您也可以使用例如覆盖它en-US.您还需要注释掉 registerLocaleData 或删除整个提供程序.那么您应该将其视为星期日的第一天.

Note: in my example in AppModule I'm forcing to use as LOCALE_ID the value for Germany, so de. You can also override it with e.g. en-US. You also need to comment out then registerLocaleData or just remove the whole provider. then you should see as first day of the week Sunday.

为什么你的构造函数没有被执行有点可疑.我的猜测是，这与您的模块结构有关.

Why your constructor is not executed is a bit suspicious. My guess here would be that this has something to do with your module structure.

这篇关于Angular 9 - 如何扩展(本地环境感知周开始)NativeDateAdapter 工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！