Angular datePicker ngx-translate

Ich habe eine eckige Anwendung, die ngx-translate verwendet. Ich möchte die Sprache meines Kalenders entsprechend der aktuellen Sprache konfigurieren. Also habe ich das gemacht:

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

Mein Problem ist, dass mein Kalender immer auf Japanisch bleibt. So ist zum Beispiel meine Browsersprache Französisch. Zum Beispiel ist das Modul, in dem ich den Kalender verwenden muss, faul

MAT_DATE_LOCALEsollte niemals mit einer bestimmten Sprache versehen werden, wenn Sie MAT_DATE_LOCALEdynamisch sein möchten .

Möglicherweise möchten Sie einige geringfügige Änderungen an Ihrem Code vornehmen:

@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))
  }
}

Nachdem Sie die obigen Änderungen vorgenommen haben, versuchen Sie Folgendes in Ihrer Komponente (Klicken switchsollte zwischen Englisch und Japanisch wechseln)

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

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

Ich habe es so gemacht, aber dann bleibt es auf Englisch:

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