如何在 Angular2 项目中将 moment.js 实现为管道答案

【问题标题】：How to implement moment.js as a pipe in an Angular2 project如何在 Angular2 项目中将 moment.js 实现为管道
【发布时间】：2016-11-24 05:31:39
【问题描述】：

我想在 angular2 项目中实现 moment.js 库，我为了将 UTC 时间转换为特定时区 Europe/london 并使用 moment 和 [moment timezone] 1

到目前为止，我已经使用以下命令在我的 Angular2 项目中安装了moment.js：

npm install moment --save

这是我当前的代码：

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

@Pipe({ name: 'moment' })
class MomentPipe{
  transform(date, format) {
    return moment(date).format(format);
  }
}

HTML：

我从后端收到时间作为对象

//time.bookingTime.iso == 2016-07-20T21:00:00.000Z

 {{time.bookingTime.iso | moment}}

它对我不起作用，我认为我的实现有误

【问题讨论】：

标签： javascript angular momentjs

【解决方案1】：

试试下面

export class MomentPipe implements PipeTransform {
transform(date, format) {
    return moment(date).format(format);
}
}

【讨论】：

这和我的完全一样，只是你的代码是用于 TypeScript 而不是 JavaScript

【解决方案2】：

当你需要使用它时，你必须在@component中指定它：

@Component({
    moduleId: module.id,
    templateUrl: './xyz.component.html',
    styleUrls: ['./xyz.component.css'],
    pipes: [MomentPipe],
    directives: [...]
})
public export ...

并以这种方式在html中使用它：

{{now | momentPipe:'YYYY-MM-DD'}}

顺便说一句，这是我写管道的方式：

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

@Pipe({
    name: 'momentPipe'
})
export class MomentPipe implements PipeTransform {
    transform(value: Date|moment.Moment, ...args: any[]): any {
        let [format] = args;
        return moment(value).format(format);
    }
}

【讨论】：

在更改传入管道的变量时（在您的情况下为now），我发现管道没有执行，大概是因为更改不是纯更改。我使用@Pipe({ name: 'momentPipe', pure: false }) 使其成为解决此问题的不纯管道。
除非您传递的字符串用方括号括起来，否则这将不起作用。即该行应修改为 - {{now | momentPipe:['YYYY-MM-DD']}} 这是因为管道接收到的参数具有任何类型的数据类型数组。
@Niraj 打字稿代码使用扩展运算符 (basarat.gitbooks.io/typescript/content/docs/…)。此运算符将参数列表转换为数组。所以向transform函数发送数组是错误的。
@Sierrodc 但我正在发送数组，然后它才能工作。否则，它不会采取其余的论点。 ex - 如果我通过“DD-MM-YYYY”，输出将是当天，即仅 22，而不是整个格式。
@Niraj 我不知道你的实现，但是，如果我在模板中写了类似 momentPipe:'YYYY-MM-DD':'something':'else' 的东西，那么在打字稿中我有args = ['YYYY-MM-DD':'something':'else']。我不知道你为什么需要指定方括号。您使用的是哪个浏览器？打字稿版本？角度版本？

【解决方案3】：

更新：2018 年 6 月

关于PIPES的官方文档

了解Moment in Typescript 和Moment Date Formats。

下面给出的示例基于此处的问题！使用PIPE 技术，我们也可以在角度视图中使用时刻（日期格式）。

MomentPipe.ts

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

@Pipe({ name: 'dateFormat' })
export class MomentPipe implements PipeTransform {
    transform(value: Date | moment.Moment, dateFormat: string): any {
        return moment(value).format(dateFormat);
    }
}

您必须将管道包含在 AppModule 的声明数组中。

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MomentPipe } from './momentPipe';

@NgModule({
  imports: [
    // Your Modules
  ],
  declarations: [
    AppComponent,
    // Your Components
    MomentPipe
  ],
  providers: [
    // Your Providers
  ]
})
export class AppModule { }

在您的 View/Html 中使用它，如下所示。

{{ createdDate | dateFormat: 'MMMM Do YYYY, h:mm:ss a'}}

希望对你有帮助。，

【讨论】：

在npm install moment --save 之后效果很好，谢谢@RajeshKdev。
不客气，很高兴帮助了你！！

【解决方案4】：

使用 ngx-moment - 这是一个出色的 moment.js 包装器，专为 Angular 2+ 设计。

它几乎可以做任何你需要开箱即用的事情，在你的情况下：

 {{time.bookingTime.iso | amDateFormat:'MMMM Do YYYY, h:mm:ss a'}}

【讨论】：