Angular中如何将日期设置为西班牙语显示？附现有代码

嘿，我来帮你搞定Angular里把日期显示成西班牙语格式的问题！其实核心是配置Angular的本地化支持，几步就能搞定，具体操作如下：

步骤1：导入本地化依赖与西班牙语语言包 #

首先，在你的模块文件（比如app.module.ts）或者项目入口文件main.ts中，导入所需的本地化工具和西班牙语语言数据：

import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import es from '@angular/common/locales/es';

步骤2：注册西班牙语本地化数据 #

紧接着导入代码，注册西班牙语的本地化信息，这样Angular才能识别并使用该语言的格式规则：

registerLocaleData(es);

步骤3：配置应用默认区域设置 #

在你的模块的providers数组中，添加LOCALE_ID的提供者，指定为西班牙语（西班牙）的区域编码es-ES：

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [/* 你的导入模块 */],
  providers: [
    { provide: LOCALE_ID, useValue: 'es-ES' }
  ],
  bootstrap: [/* 根组件 */]
})
export class AppModule { }

步骤4：使用date管道展示日期 #

现在你原来的模板代码几乎不用修改，date:"medium"管道会自动按照西班牙语的格式渲染日期了：

<a>{{currentDate | date:"medium"}}</a><b>|</b><a>{{name}}</a>

举个例子，日期会显示成类似 15 oct. 2024 14:30:45 这样的西班牙语格式。

如果你想要更贴合日常使用的自定义格式（比如带“a las”的时间表达），也可以直接写格式字符串：

<a>{{currentDate | date:"dd/MM/yyyy 'a las' HH:mm:ss"}}</a><b>|</b><a>{{name}}</a>

这样会输出类似 15/10/2024 a las 14:30:45 的格式，更符合西班牙语的表达习惯。

内容的提问来源于stack exchange，提问作者Gabriel Acosta Nuñez