ngx moment
6.0.2
Angular用のJSパイプ
このモジュールは、Angular 7.0.0以降で動作します。
古い角度バージョンについては、Angular2-Momentをインストールしてください。 Angularjsについては、Angular-Momentをチェックしてください。
npm install --save moment ngx-momentまたは糸を使用する場合：
yarn add moment ngx-momentMomentModuleアプリのモジュールにインポートします。
import { MomentModule } from 'ngx-moment' ;
@ NgModule ( {
imports : [
MomentModule
]
} )使用できるパイプが利用できるようになるNgxMomentOptionsを提供したい場合は、
import { MomentModule } from 'ngx-moment' ;
@ NgModule ( {
imports : [
MomentModule . forRoot ( {
relativeTimeThresholdOptions : {
'm' : 59
}
} )
]
} )これにより、すべてのngx-momentパイプがアプリコンポーネントで使用できるようになります。
デフォルトでfalseと別のオプションのformatFn関数を使用するオプションのomitSuffix引数を取ります。
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{myDate | amTimeAgo}}
`
} ) Last updated: a few seconds ago
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{myDate | amTimeAgo:true}}
`
} ) Last updated: a few seconds
オプションのreferenceTime引数（デフォルトは今にデフォルト）を取り、出力フォーマットオブジェクトまたはコールバック関数になる可能性のある引数をformats 。詳細については、Momentjsドキュメントを参照してください。
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{myDate | amCalendar}}
`
} ) Last updated: Today at 14:00 （デフォルトの参照タイムはデフォルトで今日です）
@ Component ( {
selector : 'app' ,
template : `
Last updated: <time>{{myDate | amCalendar:nextDay }}</time>
`
} )
export class AppComponent {
nextDay : Date ;
constructor ( ) {
this . nextDay = new Date ( ) ;
nextDay . setDate ( nextDay . getDate ( ) + 1 ) ;
}
} Last updated: Yesterday at 14:00 （参照は明日です）
@ Component ( {
selector : 'app' ,
template : `
Last updated: <time>{{myDate | amCalendar:{sameDay:'[Same Day at] h:mm A'} }}</time>
`
} ) Last updated: Same Day at 2:00 PM
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{myDate | amDateFormat:'LL'}}
`
} ) Last updated: January 24, 2016
カスタム形式の日付を、他のパイプで使用できるモーメントオブジェクトに解析します。
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{'24/01/2014' | amParse:'DD/MM/YYYY' | amDateFormat:'LL'}}
`
} ) Last updated: January 24, 2016
パイプは、パラメーターとして一連の形式を受け入れることもできます。
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{'24/01/2014 22:00' | amParse: formats | amDateFormat:'LL'}}
`
} )
export class App {
formats : string [ ] = [ 'DD/MM/YYYY HH:mm:ss' , 'DD/MM/YYYY HH:mm' ] ;
constructor ( ) { }
} Last updated: January 24, 2016
UTC時間を現地時間に変換します。
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{mydate | amLocal | amDateFormat: 'YYYY-MM-DD HH:mm'}}
`
} )プリントはLast updated 2016-01-24 12:34
ロケールを変更するためにamdateformatパイプで使用します。
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{'2016-01-24 14:23:45' | amLocale:'en' | amDateFormat:'MMMM Do YYYY, h:mm:ss a'}}
`
} ) Last updated: January 24th 2016, 2:23:45 pm
注：ロケールをインポートする必要がある場合があります（アプリモジュールなど）。
import 'moment/locale/de' ; @ Component ( {
selector : 'app' ,
template : `
Last updated: {{ (1456263980 | amFromUnix) | amDateFormat:'hh:mmA'}}
`
} ) Last updated: 01:46PM
@ Component ( {
selector : 'app' ,
template : `
Uptime: {{ 365 | amDuration:'seconds' }}
`
} ) Uptime: 6 minutes
@ Component ( {
selector : 'app' ,
template : `
Expiration: {{nextDay | amDifference: today :'days' : true}} days
`
} ) Expiration: 1 days
これらのパイプを使用して、日付算術を実行します。詳細については、Momentjsドキュメントを参照してください。
@ Component ( {
selector : 'app' ,
template : `
Expiration: {{'2017-03-17T16:55:00.000+01:00' | amAdd: 2 : 'hours' | amDateFormat: 'YYYY-MM-DD HH:mm'}}
`
} )印刷のExpiration: 2017-03-17 18:55
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{'2017-03-17T16:55:00.000+01:00' | amSubtract: 5 : 'years' | amDateFormat: 'YYYY-MM-DD HH:mm'}}
`
} ) Last updated: 2012-03-17 16:55
日付をUTCとして解析し、後続のモーメント操作（UTCでの時間を表示するなど）のモードを有効にします。これをamLocalと組み合わせて、現地時間にUTC日付を表示できます。
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{ '2016-12-31T23:00:00.000-01:00' | amFromUtc | amDateFormat: 'YYYY-MM-DD' }}
`
} ) Last updated: 2017-01-01
標準のISO8601とは異なる形式を指定することもできます。
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{ '31/12/2016 23:00-01:00' | amFromUtc: 'DD/MM/YYYY HH:mmZZ' | amDateFormat: 'YYYY-MM-DD' }}
`
} )または一連の形式でさえ：
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{ '31/12/2016 23:00-01:00' | amFromUtc: formats | amDateFormat: 'YYYY-MM-DD' }}
`
} )
export class App {
formats : string [ ] = [ 'DD/MM/YYYY HH:mm:ss' , 'DD/MM/YYYY HH:mmZZ' ] ;
constructor ( ) { }
}上記の両方の例はLast updated: 2017-01-01
後続のモーメント操作（UTCの時間を表示するなど）にUTCモードを有効にします。
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{ '2016-12-31T23:00:00.000-01:00' | amUtc | amDateFormat: 'YYYY-MM-DD' }}
`
} ) Last updated: 2017-01-01
文字列を解析しますが、結果のモーメントオブジェクトは、文字列に提供されたオフセットを備えた固定オフセットタイムゾーンに保持します。
@ Component ( {
selector : 'app' ,
template : `
Last updated: {{ '2016-12-31T23:00:00.000-03:00' | amParseZone | amDateFormat: 'LLLL (Z)' }}
`
} ) Last updated: Saturday, December 31, 2016 11:00 PM (-03:00)
瞬間が別の瞬間の前にあるかどうかを確認してください。ミリ秒以外のユニットに粒度を制限することをサポートし、ユニットを2番目のパラメーターとして渡します
@ Component ( {
selector : 'app' ,
template : `
Today is before tomorrow: {{ today | amIsBefore:tomorrow:'day' }}
`
} ) Today is before tomorrow: true
@ Component ( {
selector : 'app' ,
template : `
Tomorrow is after today: {{ tomorrow | amIsAfter:today:'day' }}
`
} ) Tomorrow is after today: true
NgxMomentOptionsオブジェクトは、 forRootコンベンションを使用してモジュールに提供でき、 momentインスタンスでパイプが使用するオプションを提供します。これらのオプションについては、以下の表に詳しく説明します。
| 小道具 | タイプ | 説明 |
|---|---|---|
| relativeTimethResholdoptions | 辞書 キー：文字列 値：番号 | Pipeがmoment.relativeTimeThresholdを設定できるようにするrelativeTimeThresholdユニットを提供します。key 、 ss 、 s 、 m 、 h 、 d 、 Mの1つとして定義されるユニットです。詳細については、相対的な時間のしきい値のドキュメントを参照してください。 |
import { NgModule , Component } from '@angular/core' ;
import { BrowserModule } from '@angular/platform-browser' ;
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' ;
import { MomentModule } from 'ngx-moment' ;
@ Component ( {
selector : 'app' ,
template : `
Last updated: <b>{{myDate | amTimeAgo}}</b>, <b>{{myDate | amCalendar}}</b>, <b>{{myDate | amDateFormat:'LL'}}</b>
`
} )
export class AppComponent {
myDate : Date ;
constructor ( ) {
this . myDate = new Date ( ) ;
}
}
@ NgModule ( {
imports : [
BrowserModule ,
MomentModule
] ,
declarations : [ AppComponent ]
bootstrap : [ AppComponent ]
} )
class AppModule { }
platformBrowserDynamic ( ) . bootstrapModule ( AppModule ) ; Stackblitzのオンラインデモを参照してください
