如何为Angular Material日期选择器动态设置MAT_DATE_LOCALE

要实现从API加载区域设置并应用到Angular Material日期选择器，你需要通过一个中间存储载体传递加载后的locale值，具体步骤如下：

1. 创建Locale存储服务 #

定义一个简单的服务，用于保存加载后的区域设置，同时提供默认值作为降级方案：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LocaleStorageService {
  // 默认区域设置，加载失败时使用
  locale: string = 'en-GB';
}

2. 修改APP_INITIALIZER的加载逻辑 #

更新loadLocale函数，注入LocaleStorageService，将API返回的locale存入该服务：

import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';
import { LocaleStorageService } from './locale-storage.service';

export function loadLocale(http: HttpClient, localeStorage: LocaleStorageService) {    
  return async () => {
    try {
      // 使用firstValueFrom替代已废弃的toPromise()
      const data = await firstValueFrom(http.get('api/dashboard/profile'));
      const profile = data as IProfile;            
      localeStorage.locale = profile.locale;
    } catch (error) {
      console.error('加载用户区域设置失败', error);
    }
  };    
}

3. 重新配置Providers数组 #

调整providers中的两个配置项：

• 给APP_INITIALIZER的deps添加LocaleStorageService，确保加载时能注入该服务
• 将MAT_DATE_LOCALE的useValue改为useFactory，依赖LocaleStorageService并返回存储的locale值

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { MAT_DATE_LOCALE } from '@angular/material/core';
import { DashboardService } from './dashboard.service';
import { LocaleStorageService } from './locale-storage.service';
import { loadLocale } from './load-locale.function';

@NgModule({
  imports: [HttpClientModule],
  providers: [
    DashboardService,       
    {
      provide: APP_INITIALIZER,
      useFactory: loadLocale,
      deps: [HttpClient, LocaleStorageService],
      multi: true,
    },
    {
      provide: MAT_DATE_LOCALE,            
      useFactory: (localeStorage: LocaleStorageService) => localeStorage.locale,
      deps: [LocaleStorageService]
    }        
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

原理说明 #

APP_INITIALIZER会在Angular应用启动前同步执行完成，因此当MAT_DATE_LOCALE的工厂函数被调用时，LocaleStorageService中的locale已经被API返回的值替换（加载成功的情况下）；如果API请求失败，则会使用服务中预设的默认值en-GB，保证日期选择器正常工作。

内容的提问来源于stack exchange，提问作者LukePerrin