[英]Angular datePicker ngx-translate
I have an angular application that uses ngx-translate.我有一个使用 ngx-translate 的 angular 应用程序。 I want to configure the language of my calendar according to the current language.
我想根据当前语言配置我的日历语言。 So I did this:
所以我这样做了:
@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);
}
}
My problem is that my calendar always stays in Japanese.我的问题是我的日历总是用日语。 So for example my browser language is French.
例如,我的浏览器语言是法语。 For example the module in which I have to use the calendar is lazy-loading
例如,我必须使用日历的模块是延迟加载
MAT_DATE_LOCALE
should never be provided with a specific language when you want MAT_DATE_LOCALE
to be dynamic.当您希望
MAT_DATE_LOCALE
是动态的时,绝不能为MAT_DATE_LOCALE
提供特定语言。
You might want to make few slight changes to your code:您可能希望对代码进行一些细微的更改:
@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))
}
}
Having made the changes above, try the following in your component (clicking switch
should switch between English and Japanese)进行上述更改后,在您的组件中尝试以下操作(单击
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")
}
I did it like this but then it stays in English:我这样做了,但它仍然是英文:
@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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.