面试题：Angular中如何自定义日期格式化管道

Question

在Angular项目中，要求你自定义一个日期格式化管道，能够将日期按照'YYYY-MM-DD'的格式进行输出。请写出实现该管道的具体代码，包括管道类的定义、装饰器的使用以及transform方法的实现逻辑。

Answer 1

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

@Pipe({
  name: 'dateFormat'
})
export class DateFormatPipe implements PipeTransform {

  transform(value: string | Date): string {
    if (!value) return '';
    const date = new Date(value);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
  }

}

在组件中使用时，可以像这样：

{{ someDate | dateFormat }}

这里 someDate 是组件中定义的日期值，可以是 string 类型符合日期格式的值，也可以是 Date 类型的值。