Angular datePicker ngx-translate

Question

我有一個使用 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);
  }
}

我的問題是我的日歷總是用日語。 例如，我的瀏覽器語言是法語。 例如，我必須使用日歷的模塊是延遲加載

Answer 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")
 }

Answer 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);
  }
}