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

我想在angular2项目中实现moment.js库，以便将

UTC

时间转换为特定时区

Europe/london

，并使用

moment

和

[moment timezone]

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

moment.js

：

npm安装时刻--保存

这是我目前的代码：

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}}

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

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

---

需要使用时，必须在@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);
    }
}

更新日期：2018年6月

关于

了解和了解

下面给出的例子基于这里的问题！使用

管道

技术，我们还可以在角度视图中使用力矩（日期格式）

动量管.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 { }

在视图/Html中使用它，如下所示。，

希望这有帮助。，

使用-这是一个为Angular 2+设计的很棒的moment.js包装器

它可以做任何你需要的东西，在你的情况下：

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

---

这与我所拥有的完全相同，只是您的代码是针对TypeScript而不是Javascript的。当更改传入管道的变量时（在您的例子中，

now

），我发现管道没有执行，可能是因为更改不是纯粹的更改。我使用了

@Pipe（{name:'momentPipe'，pure:false}）

使这是一个不纯净的管道，它解决了这个问题。除非您传递的字符串被括在方括号中，否则这不会起作用。i、 e该行应修改为-{now | momentPipe:['YYYY-MM-DD']}}这是因为pipe接收的参数具有any类型的数据类型数组。@Niraj类型脚本代码使用扩展运算符（）。此运算符将参数列表转换为数组。因此，将数组发送到转换函数是错误的。@Sierrodc但我正在发送数组，并且只有在它工作时。否则的话，就不能接受剩下的论点。例如-如果我通过“DD-MM-YYYY”，输出将是当前日期，即22，而不是整个格式。@Niraj我不知道您的实现，但是，如果我在模板中编写类似于momentPipe的内容：'YYYY-MM-DD'：'something'：'else'，那么在typescript中我有args=['yyyyy-MM-DD'：'something'：'else']。我不知道你为什么要指定方形制动器。您使用的是哪种浏览器？打字稿版本？angular版本？在

npm安装后运行良好--保存
，谢谢@RajeshKdev。不客气，很高兴帮助了您！！
 {{time.bookingTime.iso | amDateFormat:'MMMM Do YYYY, h:mm:ss a'}}