Question

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

所以我可能将不同的语言环境设置为this.adapter.setLocale()，并且在日期选择器上似乎没有什么区别（它仍然使用'uk'）。当没有延迟加载的模块时，它运行良好。

我有一个用于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中使用相同的语言环境。

Answer 1

好的，现在可以使用了。您必须使用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()
  ]

  ...

角材料datepicker延迟加载

1 个答案: