ngx moment

ngx-moment

moment.js ท่อสำหรับ Angular

โมดูลนี้ใช้งานได้กับ Angular 7.0.0 และใหม่กว่า

สำหรับเวอร์ชันเชิงมุมรุ่นเก่าโปรดติดตั้ง Angular2-Moment สำหรับ 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 ทั้งหมดพร้อมใช้งานสำหรับใช้ในส่วนประกอบแอปของคุณ

ท่อที่มีอยู่

ท่อ Amtimeago

ใช้อาร์กิวเมนต์ 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

ท่อ Amcalendar

ใช้อาร์กิวเมนต์ referenceTime ที่เป็นตัวเลือก (ค่าเริ่มต้นถึงตอนนี้) และอาร์กิวเมนต์ formats ที่อาจเป็นวัตถุรูปแบบเอาต์พุตหรือฟังก์ชั่นการเรียกกลับ ดู Momentjs Docs สำหรับรายละเอียด

@ 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

ท่อ amdateformat

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{myDate | amDateFormat:'LL'}}
  `
} )

พิมพ์ Last updated: January 24, 2016

ท่อ Amparse

แยกวิเคราะห์วันที่กำหนดเองลงในวัตถุช่วงเวลาที่สามารถใช้กับท่ออื่น ๆ ได้

@ 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

ท่อ Amlocal

แปลงเวลา UTC เป็นเวลาท้องถิ่น

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{mydate | amLocal | amDateFormat: 'YYYY-MM-DD HH:mm'}}
  `
} )

พิมพ์ Last updated 2016-01-24 12:34

ท่อ Amlocale

ที่จะใช้กับท่อ 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' ; 

ท่อ Amfromunix

@ 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

ท่อ Amdifference

@ Component ( {
  selector : 'app' ,
  template : `
    Expiration: {{nextDay | amDifference: today :'days' : true}} days
  `
} )

งานพิมพ์ Expiration: 1 days

AMADD และ AMSUBTRACT PIPES

ใช้ท่อเหล่านี้เพื่อดำเนินการเลขคณิตวันที่ ดู Momentjs Docs สำหรับรายละเอียด

@ 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

ท่อ Amfromutc

แยกวิเคราะห์วันที่เป็น 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

ท่อ AMUTC

เปิดใช้งานโหมด 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

ท่อ Amparsezone

แยกวิเคราะห์สตริง แต่เก็บวัตถุโมเมนต์ผลลัพธ์ในเขตเวลาที่กำหนดแบบคงที่ด้วยออฟเซ็ตที่ให้ไว้ในสตริง

@ 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)

amisbefore และ pipe amisafter

ตรวจสอบว่าช่วงเวลาหนึ่งก่อนอีกช่วงเวลาหนึ่ง รองรับการ จำกัด ความละเอียดของหน่วยอื่นที่ไม่ใช่มิลลิวินาทีส่งผ่านหน่วยเป็นพารามิเตอร์ที่สอง

@ 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

วัตถุ NgxMomentOptions สามารถให้กับโมดูลโดยใช้อนุสัญญา forRoot และจะให้ตัวเลือกสำหรับท่อที่จะใช้กับอินสแตนซ์ moment ตัวเลือกเหล่านี้มีรายละเอียดในตารางด้านล่าง:

ข้อต่อ	พิมพ์	คำอธิบาย
relativetimetHroesholdoptions	พจนานุกรม คีย์: สตริง ค่า: หมายเลข	จัดเตรียมหน่วย 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