ngx moment
6.0.2
MONM.JS管道
該模塊可與Angular 7.0.0一起使用，並且更新。
對於較舊的Angular版本，請安裝Angular2矩。對於AngularJS，請查看Angular Moment。
npm install --save moment ngx-moment或使用紗線：
yarn add moment ngx-moment將MomentModule導入您的應用程序模塊：
import { MomentModule } from 'ngx-moment' ;
@ NgModule ( {
imports : [
MomentModule
]
} )如果您想提供任何可以使用的NgxMomentOptions ，您也可以使用：
import { MomentModule } from 'ngx-moment' ;
@ NgModule ( {
imports : [
MomentModule . forRoot ( {
relativeTimeThresholdOptions : {
'm' : 59
}
} )
]
} )這使所有ngx-moment Pipes都可以在您的應用程序組件中使用。
採用可選的omitSuffix參數，該參數默認為false和另一個可選的formatFn函數，可用於自定義時間以前的文本的格式。
@ 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 （默認的ReferencEtime今天默認為默認情況下）
@ 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)
檢查片刻是否在另一個時刻。支持將粒度限製到以外的單位以外的單位，將單元作為第二參數傳遞
@ 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
可以使用forRoot約定向模塊提供NgxMomentOptions對象，並將為管道提供的選項與moment實例一起使用，這些選項在下表中詳細介紹：
| 支柱 | 類型 | 描述 |
|---|---|---|
| 相關甲基股權 | 字典 鍵：字符串 值：數字 | 提供relativeTimeThreshold單位，允許管道設置moment.relativeTimeThreshold 。key是一個定義為ss ， s ， m ， h ， d ， M的單元。有關更多詳細信息，請參見相對時間閾值文檔。 |
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上查看在線演示
