如何在PrimeNG 19中更改语言？实现p-datepicker法西语本地化

1. 安装本地化依赖 #

首先确保项目已安装@angular/localize，如果未安装，执行以下命令：

ng add @angular/localize

2. 导入并注册语言Locale #

在你的根模块（如app.module.ts）中，导入Angular的Locale数据和PrimeNG的语言包，并完成注册：

import { NgModule } from '@angular/core';
import { registerLocaleData } from '@angular/common';
// 导入法语、西班牙语的Locale数据
import localeFr from '@angular/common/locales/fr';
import localeEs from '@angular/common/locales/es';
// 导入PrimeNG对应语言包
import { fr } from 'primeng/locale';
import { es } from 'primeng/locale';

// 注册Angular Locale
registerLocaleData(localeFr);
registerLocaleData(localeEs);

@NgModule({
  // ... 其他模块配置
})
export class AppModule { }

3. 配置语言（全局或单个组件） #

全局语言配置 #

通过LocaleService为所有PrimeNG组件统一设置语言，可在根组件（如app.component.ts）中实现：

import { Component, OnInit } from '@angular/core';
import { LocaleService } from 'primeng/api';
import { fr, es } from 'primeng/locale';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private localeService: LocaleService) {}

  ngOnInit() {
    // 默认设置为法语
    this.setLanguage('fr');
  }

  // 切换语言方法
  setLanguage(lang: 'fr' | 'es') {
    const targetLocale = lang === 'fr' ? fr : es;
    this.localeService.setLocale(targetLocale);
    // 更新文档语言属性，确保全局一致性
    document.documentElement.lang = lang;
  }
}

单个Datepicker组件配置 #

若只需为特定p-datepicker设置语言，直接使用locale输入属性：

<!-- 法语日期选择器 -->
<p-datepicker locale="fr"></p-datepicker>

<!-- 西班牙语日期选择器 -->
<p-datepicker locale="es"></p-datepicker>

4. 自定义文本（可选） #

如果需要覆盖默认翻译文本，可通过datePickerLocale属性自定义：

<p-datepicker 
  locale="fr"
  [datePickerLocale]="{ today: 'Aujourd\'hui', clear: 'Effacer', apply: 'Appliquer' }"
></p-datepicker>

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