Angular应用中如何将日期格式设为全局常量并在HTML模板调用？

下面提供三种实用的实现方式，按需选择：

方法一：全局常量文件 #

适合简单场景，直接定义常量后在组件中导入使用：

1. 创建全局常量文件

// src/app/core/constants/date-formats.ts
export const DATE_FORMAT = 'd/M/y, hh:mm';

2. 在组件中导入并暴露给模板

// 目标组件文件（如example.component.ts）
import { DATE_FORMAT } from '../core/constants/date-formats';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  readonly dateFormat = DATE_FORMAT;
  creationDate = new Date();
}

3. 模板中使用

<p>{{creationDate | date: dateFormat}}</p>

方法二：依赖注入令牌（InjectionToken） #

符合Angular依赖注入规范，适合需要在服务、组件中统一调用的场景：

1. 创建注入令牌

// src/app/core/tokens/date-format.token.ts
import { InjectionToken } from '@angular/core';

export const DATE_FORMAT = new InjectionToken<string>('全局日期格式');

2. 在根模块中提供令牌值

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { DATE_FORMAT } from './core/tokens/date-format.token';

@NgModule({
  providers: [
    { provide: DATE_FORMAT, useValue: 'd/M/y, hh:mm' }
  ]
})
export class AppModule { }

3. 在组件中注入并使用

// 目标组件文件
import { Component, Inject } from '@angular/core';
import { DATE_FORMAT } from '../core/tokens/date-format.token';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  constructor(@Inject(DATE_FORMAT) public readonly dateFormat: string) {}
  creationDate = new Date();
}

模板调用方式同方法一：

<p>{{creationDate | date: dateFormat}}</p>

方法三：自定义日期管道 #

最简洁的模板调用方式，直接封装默认格式，无需传参：

1. 创建自定义管道

// src/app/core/pipes/custom-date.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'customDate'
})
export class CustomDatePipe extends DatePipe implements PipeTransform {
  transform(value: any, format?: string): any {
    // 优先使用传入的格式，无传入则用默认格式
    const useFormat = format || 'd/M/y, hh:mm';
    return super.transform(value, useFormat);
  }
}

2. 在根模块中声明并导出管道

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { CustomDatePipe } from './core/pipes/custom-date.pipe';

@NgModule({
  declarations: [CustomDatePipe],
  exports: [CustomDatePipe] // 导出后其他模块可直接使用
})
export class AppModule { }

3. 模板中直接使用

<!-- 使用默认格式 -->
<p>{{creationDate | customDate}}</p>

<!-- 如需临时覆盖格式，可传入自定义格式 -->
<p>{{creationDate | customDate: 'yyyy-MM-dd'}}</p>

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