如何在Angular项目中通过ngx-translate获取本地化月份名称

步骤1：确认翻译文件结构 #

确保你的多语言JSON文件（如en.json、zh.json）中已按月份索引（或数字）定义好月份名称，两种方式二选一：

方式A：按0-11索引（0对应1月，11对应12月）

// en.json
{
  "months": {
    "0": "January",
    "1": "February",
    "2": "March",
    ...,
    "11": "December"
  }
}

// zh.json
{
  "months": {
    "0": "一月",
    "1": "二月",
    "2": "三月",
    ...,
    "11": "十二月"
  }
}

方式B：按1-12数字（1对应1月，12对应12月）

// en.json
{
  "months": {
    "1": "January",
    "2": "February",
    ...,
    "12": "December"
  }
}

步骤2：模板中结合translate管道渲染 #

根据你选择的翻译键结构，替换原date管道的月份显示逻辑：

对应方式A（0-11索引）

先在组件中获取当前月份索引：

// 组件.ts文件
currentMonthIndex = new Date().getMonth();

然后在模板中渲染：

<p class="style-title-calendar">
  {{ 'months.' + currentMonthIndex | translate }}, {{ dateSelect | date: 'yyyy' }}
</p>

对应方式B（1-12数字）

无需组件额外处理，直接在模板中通过date管道拿到月份数字后拼接翻译键：

<p class="style-title-calendar">
  {{ 'months.' + (dateSelect | date: 'M') | translate }}, {{ dateSelect | date: 'yyyy' }}
</p>

进阶：用翻译插值整合月份和年份 #

如果需要适配不同语言的日期格式（比如中文习惯用“年份年月份”），可以在翻译文件中添加带插值的统一键：

// en.json
{
  "months": {...},
  "month_year_format": "{{month}}, {{year}}"
}

// zh.json
{
  "months": {...},
  "month_year_format": "{{year}}年{{month}}"
}

组件中准备插值参数：

// 组件.ts文件
monthYearParams = {
  month: this.translate.instant('months.' + new Date().getMonth()),
  year: new Date().getFullYear().toString()
};

模板中渲染：

<p class="style-title-calendar">{{ 'month_year_format' | translate: monthYearParams }}</p>

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