Angular datePicker ngx-translate答案

【问题标题】：Angular datePicker ngx-translateAngular datePicker ngx-translate
【发布时间】：2020-07-22 14:27:30
【问题描述】：

我有一个使用 ngx-translate 的 Angular 应用程序。我想根据当前语言配置我的日历语言。所以我这样做了：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppRoutingModule,
    NgbModule,
    BrowserModule,
    CoreModule,
    SharedModule,
    BrowserAnimationsModule,
    AngularSvgIconModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: FileTranslationService,
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true
    },
    {
      provide: MAT_DATE_LOCALE,
      useValue: 'ja-JP'
    },
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    {
      provide: MAT_DATE_FORMATS,
      useValue: MAT_MOMENT_DATE_FORMATS
    }

  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(translate: TranslateService, private _adapter: DateAdapter<any>){
    translate.addLangs(['fr']);
    translate.setDefaultLang('fr');

    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/fr/) ? browserLang : 'fr');

    this._adapter.setLocale(translate.currentLang);
    console.log(this._adapter);
  }
}

我的问题是我的日历总是使用日文。例如，我的浏览器语言是法语。例如，我必须使用日历的模块是延迟加载

【问题讨论】：

标签： angular datepicker ngx-translate

【解决方案1】：

如果您希望MAT_DATE_LOCALE 是动态的，则永远不应为MAT_DATE_LOCALE 提供特定语言。

您可能希望对您的代码稍作改动：

@NgModule({
  imports: [
     MatDatepickerModule,
     /** Note!! MatNativeDateModule must be imported in root module and only there! 
     *  do not import it in shared modules!
     */
     MatNativeDateModule
  ],
  providers: [
    /**
     *  Don't proivde MAT_DATE_LOCALE token 
     *  Once provided MAT_DATE_LOCALE with a specific lanugage, it cannot be changed
     * 
     *   // {
     *   //   provide: MAT_DATE_LOCALE,
     *   //   useValue: 'ja-JP'
     *   // },
     * 
     * Exclude the following providers (as they aren't needed in your case):
     * DateAdapter will be provided by MatNativeDateModule
     * 
     *   // {
     *   //   provide: DateAdapter,
     *   //   useClass: MomentDateAdapter,
     *   //   deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
     *   // },
     *   // {
     *   //   provide: MAT_DATE_FORMATS,
     *   //   useValue: MAT_MOMENT_DATE_FORMATS
     *   // }
     */
 ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(
    private translate: TranslateService,
    private adapter: DateAdapter<Date>
  ) {
    this.translate.use(this.translate.getBrowserLang());

    this.translate.onLangChange
      .subscribe(({ lang }: LangChangeEvent) => this.adapter.setLocale(lang))
  }
}

进行上述更改后，在您的组件中尝试以下操作（单击switch 应该在英文和日文之间切换）

 public en: boolean = false;
 constructor(private _adapter: DateAdapter<Date>}

 public switch() {
   this.en = !!!this.en
   this._adapter.setLocale(this.en ? "en-US" : "ja-JP")
 }

【讨论】：

我会根据语言设置日历，而不需要点击开关。我希望日历根据浏览器的语言自动成为正确的语言
这不会改变。我使用延迟加载来加载我的功能
我刚刚测试过，它可以工作。我忘了从我的 materialModule 中删除 Matnativedatemodule。但是如何立即显示 Matnativedatemodule 而不是在 Appmodule 中，因为如果我这样做，它不会考虑 DateAdapter
@ddd 什么意思？
我的问题是我必须在哪里导入 Matnativedate 模块。因为如果我把它放在在惰性模式模块中加载到每个模块中的 materialModule 中，它就不起作用。但如果我放入 app.module 它就可以了。

【解决方案2】：

我是这样做的，但它仍然是英文：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppRoutingModule,
    NgbModule,
    BrowserModule,
    CoreModule,
    SharedModule,
    BrowserAnimationsModule,
    AngularSvgIconModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: FileTranslationService,
        deps: [HttpClient]
      }
    }),
    MatNativeDateModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(translate: TranslateService, private _adapter: DateAdapter<any>){
    translate.addLangs(['fr']);
    translate.setDefaultLang('fr');

    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/fr/) ? browserLang : 'fr');

    this._adapter.setLocale(translate.currentLang);
    console.log(this._adapter);
  }
}

【讨论】：