时间戳

首页 > 解决方案 > Angular Material datepicker延迟加载

angular - Angular Material datepicker延迟加载

问题描述

我有一个 Angular 应用程序，其中包含多个延迟加载的模块。但是，当我将我的应用程序分解为这些模块时，我this.adapter.setLocale(locale);的主模块停止工作。除了在 init 上手动设置每个模块中的语言环境之外，有没有办法跨模块填充此更改？

所以我可能设置了不同的语言环境this.adapter.setLocale()，这似乎对日期选择器没有任何影响（它仍然使用“英国”）。当没有延迟加载的模块时，它运行良好。

我有一个 Material 的共享模块，然后我将它导入到其他模块中。

import { NgModule } from '@angular/core';
import {
    MAT_DATE_LOCALE,
    MatAutocompleteModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule
} from "@angular/material";
import { MatMomentDateModule } from "@angular/material-moment-adapter";

@NgModule({
    imports: [
        MatInputModule,
        MatDatepickerModule,
        MatFormFieldModule,
        MatMomentDateModule,
        MatSelectModule,
        MatAutocompleteModule,
        MatCheckboxModule,
    ],
    providers: [
        {provide: MAT_DATE_LOCALE, useValue: 'uk'},
    ],
    exports: [
        MatInputModule,
        MatDatepickerModule,
        MatFormFieldModule,
        MatMomentDateModule,
        MatSelectModule,
        MatAutocompleteModule,
        MatCheckboxModule,
    ]
})
export class MaterialModule {
}

换句话说，我希望我的整个应用程序在 Material Datepicker 中跨不同的功能模块使用相同的语言环境。

标签： angular

解决方案

好的，它现在可以工作了。你必须使用ModuleWithProviders

import { CommonModule } from '@angular/common';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { MAT_DATE_FORMATS, MAT_DATE_LOCALE, DateAdapter, NativeDateAdapter, MatDateFormats } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { Platform } from '@angular/cdk/platform';

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';

registerLocaleData(localeDe, 'de-De', localeDeExtra);

export const MY_FORMATS: MatDateFormats = {
  parse: {
    dateInput: {year: 'numeric', month: '2-digit', day: '2-digit'}
  },
  display: {
    dateInput: {year: 'numeric', month: '2-digit', day: '2-digit'},
    monthYearLabel: {year: 'numeric', month: 'short'},
    dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
    monthYearA11yLabel: {year: 'numeric', month: 'long'}
  },
};

@NgModule({
  imports: [
    CommonModule,
    MatDatepickerModule
  ],
  exports: [
    MatDatepickerModule
  ]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [
        { provide: LOCALE_ID, useValue: 'de-DE' },
        { provide: DateAdapter, useClass: NativeDateAdapter, deps: [MAT_DATE_LOCALE, Platform] },
        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }
      ]
    };
  }
}

然后在你的 AppModule 中使用 SharedModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    SharedModule.forRoot()
  ]

  ...

推荐阅读