Angular中如何使用Pipe管道将日期格式化为dd/MM/yy格式

你可以通过自定义管道完成需求，不需要在组件里写冗余的判断逻辑，实现步骤如下：

• 首先生成自定义管道，CLI命令如下：
  ng generate pipe elevator-arrival-date
• 编写管道核心逻辑，复用Angular内置的DatePipe做格式化，同时缓存到达1楼的时间点，避免变更检测重复触发时时间不断刷新：

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'elevatorArrivalDate',
  // 非standalone项目删除下一行，将管道加入对应模块的declarations和exports即可
  standalone: true,
  providers: [DatePipe]
})
export class ElevatorArrivalDatePipe implements PipeTransform {
  private arrivalTime: Date | null = null;

  constructor(private datePipe: DatePipe) {}

  transform(currentFloor: number): string {
    if (currentFloor === 1) {
      // 首次到达1楼时记录时间，后续停在1楼时不重复更新时间
      if (!this.arrivalTime) {
        this.arrivalTime = new Date();
      }
      return this.datePipe.transform(this.arrivalTime, 'dd/MM/yy') ?? '';
    }
    // 不在1楼时清空缓存时间，返回空内容
    this.arrivalTime = null;
    return '';
  }
}

• 模板里直接传入当前楼层值调用管道即可：

<span class="floor-arrival-time">{{ currentFloor | elevatorArrivalDate }}</span>

注意事项 #

• 不要在transform方法里每次判断到1楼就new新的Date，否则Angular每次变更检测跑transform的时候都会生成新时间，显示的日期会不停跳，缓存时间后只有每次从其他楼层抵达1楼的瞬间才会更新时间值。
• 日期格式化直接用内置DatePipe处理即可，不用自己手写转换逻辑，能自动规避时区、日期进位的边界问题。
• 非standalone项目记得把管道加入所属模块的declarations数组，需要跨模块使用就同步加到exports数组里。

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