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.

如何使其工作?

推荐答案

我准备了一些我所做的与您所做的大致相同.但是，主要的区别(我想这就是问题所在，为什么它不适合您)是您如何提供 platform .

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 需要使用您可以通过 @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 用作德国的值.您也可以使用例如 zh-CN .您还需要先注释掉，然后 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屋！