代码之家 › 专栏 › 技术社区 › Sergey

角度材质日期选择器延迟加载

angular

Sergey · 技术社区 · 6 年前

我有一个有多个模块的角度应用程序,这些模块被延迟加载。但是,当我把我的应用程序分成这些模块时 this.adapter.setLocale(locale); 在主模块中停止工作。 除了在init上的每个模块中手动设置语言环境外,是否有方法跨模块填充此更改?

所以我可能设置了不同的语言环境 this.adapter.setLocale() 这似乎对日期选择器没有任何影响(它仍然使用“uk”)。

我有一个共享的材料模块,然后我导入其他模块。

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中使用相同的语言环境。

1 回复 | 直到 6 年前

Pascal 6 年前

好的,现在开始工作了。你必须使用 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()
  ]

  ...