ngx moment
6.0.2
Moment.js Angular 용 파이프
이 모듈은 Angular 7.0.0 및 최신에서 작동합니다.
오래된 각도 버전의 경우 Angular2-Moment를 설치하십시오. AngularJS의 경우 앵귤러 모멘트를 확인하십시오.
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 파이프를 앱 구성 요소에 사용할 수 있습니다.
기본값은 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에 시간 표시)을위한 모드를 활성화합니다. 이것은 현지 시간에 UTC 날짜를 표시하기 위해 amLocal 과 결합 될 수 있습니다.
@ 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
NgxMomentOptions 객체는 forRoot 컨벤션을 사용하여 모듈에 제공 될 수 있으며 파이프가 moment 인스턴스와 함께 사용할 수있는 옵션을 제공합니다. 이러한 옵션은 아래 표에 자세히 설명되어 있습니다.
| 소품 | 유형 | 설명 |
|---|---|---|
| 상대성 요법 | 사전 키 : 문자열 가치 : 숫자 | 파이프가 moment.relativeTimeThreshold 를 설정할 수 있도록 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의 온라인 데모를 참조하십시오
