الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

NGX-Moment

لحظة. js الأنابيب للزاوية

تعمل هذه الوحدة مع 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 متاحة للاستخدام في مكونات التطبيق الخاصة بك.

الأنابيب المتاحة

أنبوب 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 مستندات للحصول على التفاصيل. 

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

يخلع تاريخًا مخصصًا في كائن لحظة يمكن استخدامه مع الأنابيب الأخرى. 

@ 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

استخدم هذه الأنابيب لأداء الحساب. انظر 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

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 و Amisafter Pipe

تحقق مما إذا كانت لحظة قبل لحظة أخرى. يدعم الحد من الحبيبات على وحدة أخرى غير ميلي ثانية ، تمرير الوحدات كمعلمة ثانية 

@ 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 ، يتم تفصيل هذه الخيارات في الجدول أدناه:

دعم يكتب وصف
RelativeTimethResholdoptions قاموس
المفتاح: سلسلة
القيمة: الرقم		 يوفر وحدات relativeTimeThreshold التي تسمح للأنبوب بتعيين moment.relativeTimeThreshold relativetimethreshold قيم.

key هو وحدة تُعرَّف بأنها واحدة من ss ، s ، m ، h ، d ، M

راجع وثائق Time Time Thresholds لمزيد من التفاصيل.

مثال كامل 

 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

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل