web-dev-qa-db-ja.com

Angular2プロジェクトのパイプとしてmoment.jsを実装する方法

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

それは私にはうまくいきませんでした、そして私は間違った実装をしていると思います

javascriptangularmomentjs
10
Hamza L.

これを使用する必要がある場合は、@ 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);
    }
}
15
Sierrodc

更新：2018年6月

[〜＃〜] pipes [〜＃〜] に関する公式ドキュメント=

Moment in TypeScript および Moment Date Formats について学習します。

ここの質問に基づいて以下に示す例！ PIPEテクニックを使用すると、Angular View（Date Formatting））でモーメントを使用できます。

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

以下のようにビュー/ HTMLで使用します。、

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

お役に立てれば。、

12
RajeshKdev

以下をお試しください

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