Angular：如何在HTML模板中使用moment.format方法？

问题原因 #

Angular模板只能直接访问组件类中暴露的属性/方法，你在TS文件里能调用moment是因为已经在文件内导入了，但模板无法识别全局的moment或文件级别的导入，必须把moment挂载到组件实例上才能被模板访问。

快速解决方法 #

1. 在组件的TS文件中，导入moment并将其赋值为组件的属性：

import moment from 'moment';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 暴露moment给模板
  moment = moment;
}

2. 此时模板中的{{moment(event.date).format('DD.MM.YYYY')}}即可正常运行。

更优方案：自定义日期管道 #

直接在模板调用moment不是Angular的最佳实践，推荐用自定义管道实现日期格式化，更易复用和维护：

1. 创建管道文件moment-date.pipe.ts：

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

@Pipe({ name: 'momentDate' })
export class MomentDatePipe implements PipeTransform {
  transform(date: Date | string | number, format: string = 'DD.MM.YYYY'): string {
    // 可添加空值处理逻辑
    if (!date) return '';
    return moment(date).format(format);
  }
}

2. 在组件所属的NgModule中声明该管道：

import { NgModule } from '@angular/core';
import { MomentDatePipe } from './moment-date.pipe';

@NgModule({
  declarations: [MomentDatePipe]
})
export class YourModule { }

3. 模板中使用管道：

<ng-template let-event>
  <div>{{event.date | momentDate:'DD.MM.YYYY'}}</div>
</ng-template>

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