全局设置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 {}