Angular datePicker ngx-翻译

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

Angular datePicker ngx-翻译

Angular datePicker ngx-translate

datepicker

ngx-translate

angular