全局设置 mat-datepicker 的语言

Question

当我点击另一个组件中的相应按钮时，我需要为应用程序中的所有日期选择器设置语言，documentation 中给出的示例仅适用于特定组件并且我在很多地方都有日期选择器所以我不想向每个组件添加相同的逻辑。有什么办法吗？

topbar.component.html

  <button (click)="changeLanguage('fr')" class="topbar__languageButton" mat-button></button>
  <button (click)="changeLanguage('en')" class="topbar__languageButton" mat-button></button>

topbar.component.ts

import { Component, OnInit} from '@angular/core';
import { DateAdapter } from '@angular/material/core';

@Component({
    selector: 'app-topbar',
    templateUrl: './topbar.component.html',
    styleUrls: ['./topbar.component.scss'],
})
export class TopbarComponent implements OnInit {

    constructor(private adapter: DateAdapter<any>) { }

    ngOnInit(): void {}

    changeLanguage(language: string): void {
        this.adapter.setLocale(language);
    }
}

target.component.html

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

target.component.ts

import { Component, OnInit} from '@angular/core';
import { DateAdapter } from '@angular/material/core';

@Component({
    selector: 'app-target',
    templateUrl: './target.component.html',
    styleUrls: ['./target.component.scss'],
})
export class TargetComponent implements OnInit {

    constructor() { }

    ngOnInit(): void {}
}

Answer 1

即使在他们的示例中，MAT_DATE_LOCALE 注入令牌和 DateAdapter 是在组件级别提供的，但这并不能阻止您在 AppModule。通过在那里提供它们，您的所有组件都将获得相同的区域设置，除非在另一个模块中被覆盖。

  @NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    CoreModule,
  ],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'de-CH' },
    {
      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 {}

全局设置 mat-datepicker 的语言

Set language for mat-datepicker globally

angular-material

ngx-translate

angular