Angular 13自定义Moment日期管道问题：isMoment始终返回false

问题根源 #

1. isMoment(value)返回false：你获取到的value是ISO格式的日期字符串（如'2023-12-01T00:00:00'），并非Moment实例，因此isMoment()自然返回false。
2. value.format is not a function报错：原管道的transform方法仅接收Moment类型参数，但实际传入了字符串类型，导致调用format()时触发类型错误。

解决方案 #

1. 修正自定义日期管道，支持多类型输入

修改管道逻辑，让它能自动处理字符串/Date/Moment类型的日期输入，并添加日期有效性校验：

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';
import { Moment } from 'moment';

@Pipe({
  name: 'myDateFormat', // 遵循Angular管道命名规范：小写短横线
})
export class DateFormatPipe implements PipeTransform {
  transform(value: string | Date | Moment, ...args: any[]): string {
    // 处理空值
    if (!value) return '';

    // 将输入统一转换为Moment实例
    const momentDate: Moment = moment.isMoment(value) ? value : moment(value);

    // 校验日期有效性，避免无效值报错
    if (!momentDate.isValid()) {
      console.warn(`无效日期值：${value}`);
      return String(value);
    }

    const format = args?.length ? args[0] : 'DD-MM-YYYY';

    switch (format) {
      case 'withTime':
        return momentDate.format('DD-MM-YYYY HH:mm:ss');
      case 'withTimePmAm':
        return momentDate.format('MMM, DD, YYYY h:mm:ss A');
      default:
        return momentDate.format(format);
    }
  }
}

2. 简化valueGetter逻辑

既然管道已经能自动处理字符串日期，无需再手动判断isMoment，直接调用管道即可：

import { isMoment } from 'moment'; // 确保正确导入isMoment工具函数

valueGetter = (datePipe: DateFormatPipe, format: any) => 
  (params: any) => {
    const valKey = params.colDef.field;
    const keys = valKey.split('.');
    let value = params.data;
    
    // 遍历嵌套字段取值
    for (const key of keys) {
      if (typeof value === 'object' && value !== null && value[key] !== undefined) {
        value = value[key];
      } else {
        value = null;
        break;
      }
    }

    // 直接交给管道处理，无需手动判断类型
    return datePipe.transform(value, format);
  };

额外说明 #

• 确保已正确安装并导入Moment依赖：npm install moment，并在Angular项目中正确引入。
• 管道命名改用小写短横线（如myDateFormat），符合Angular官方的代码规范。

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