Startseite>Programmierbezogen>Anderer Quellcode
Herunterladen

ngx-moment

moment.js pipes für eckel

Dieses Modul funktioniert mit Angular 7.0.0 und neuer.

Für ältere Winkelversionen installieren Sie bitte Angular2-Moment. Für die AngularJs lesen Sie bitte Angular-Moment.

Installation 

npm install --save moment ngx-moment

oder wenn Sie Garn verwenden: 

yarn add moment ngx-moment

Verwendung

Importieren Sie MomentModule in die Module Ihrer App: 

 import { MomentModule } from 'ngx-moment' ;

@ NgModule ( {
  imports : [
    MomentModule
  ]
} )

Wenn Sie NgxMomentOptions bereitstellen möchten, die den Rohren zur Verfügung gestellt werden, können Sie auch verwenden: 

 import { MomentModule } from 'ngx-moment' ;

@ NgModule ( {
  imports : [
    MomentModule . forRoot ( {
      relativeTimeThresholdOptions : {
        'm' : 59
      }
    } )
  ]
} )

Dies stellt alle ngx-moment -Rohre zur Verwendung in Ihren App-Komponenten zur Verfügung.

Verfügbare Rohre

Amtimeago Pipe

Nimmt ein optionales omitSuffix -Argument an, das standardmäßig zu false und eine andere optionale formatFn -Funktion verwendet werden kann, mit der das Format des vorübergehenden Textes angepasst werden kann. 

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

Drucke Last updated: a few seconds ago 

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

Drucke Last updated: a few seconds

Amcalendar -Pfeife

Nimmt optionales referenceTime -Argument (Standardeinstellungen bis jetzt) ​​und formats , das die Objekt- oder Rückruffunktion ausgeben kann. Weitere Informationen finden Sie unter momentjs docs. 

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

Last updated: Today at 14:00 (Standardreferenzierung ist heute standardmäßig) 

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

Drucke Last updated: Yesterday at 14:00 (ReferenceTime ist morgen) 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: <time>{{myDate | amCalendar:{sameDay:'[Same Day at] h:mm A'} }}</time>
  `
} )

Die Drucke Last updated: Same Day at 2:00 PM

AmdateFormat Rohr 

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

Drucke Last updated: January 24, 2016

AmParse Pipe

Pariert ein maßgeschneidertes Datum in ein Moment-Objekt, das mit den anderen Rohren verwendet werden kann. 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{'24/01/2014' | amParse:'DD/MM/YYYY' | amDateFormat:'LL'}}
  `
} )

Drucke Last updated: January 24, 2016

Das Rohr kann auch ein Array von Formaten als Parameter akzeptieren. 

@ 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 ( ) { }

}

Drucke Last updated: January 24, 2016

Amlokalrohr

Konvertiert die UTC -Zeit in die lokale Zeit. 

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

Drucke Last updated 2016-01-24 12:34

Amlocale Pipe

Mit AmdateFormat -Rohr verwendet werden, um das Gebietsschema zu wechseln. 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{'2016-01-24 14:23:45' | amLocale:'en' | amDateFormat:'MMMM Do YYYY, h:mm:ss a'}}
  `
} )

Drucke Last updated: January 24th 2016, 2:23:45 pm

Hinweis: Möglicherweise muss das Gebietsschema importiert werden (z. B. im App -Modul). 

 import 'moment/locale/de' ;

amfromunix pipe 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{ (1456263980 | amFromUnix) | amDateFormat:'hh:mmA'}}
  `
} )

Drucke Last updated: 01:46PM

Startrohr 

@ Component ( {
  selector : 'app' ,
  template : `
    Uptime: {{ 365 | amDuration:'seconds' }}
  `
} )

Drucke Uptime: 6 minutes

Amdifferenzrohr 

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

Drucke Expiration: 1 days

Amadd- und Amsubract -Rohre

Verwenden Sie diese Rohre, um die Datumsarithmetik durchzuführen. Weitere Informationen finden Sie unter momentjs docs. 

@ Component ( {
  selector : 'app' ,
  template : `
    Expiration: {{'2017-03-17T16:55:00.000+01:00' | amAdd: 2 : 'hours' | amDateFormat: 'YYYY-MM-DD HH:mm'}}
  `
} )

Drucke 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'}}
  `
} )

Drucke Last updated: 2012-03-17 16:55

amfromutc Rohr

Analysiert das Datum als UTC und ermöglicht den Modus für nachfolgende Momentvorgänge (z. B. die Uhrzeit in UTC). Dies kann mit amLocal kombiniert werden, um ein UTC -Datum in lokaler Zeit anzuzeigen. 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{ '2016-12-31T23:00:00.000-01:00' | amFromUtc | amDateFormat: 'YYYY-MM-DD' }}
  `
} )

Drucke Last updated: 2017-01-01

Es ist auch möglich, ein anderes Format anzugeben als der Standard -ISO8601. 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{ '31/12/2016 23:00-01:00' | amFromUtc: 'DD/MM/YYYY HH:mmZZ' | amDateFormat: 'YYYY-MM-DD' }}
  `
} )

Oder sogar eine Reihe von Formaten: 

@ 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 ( ) { }

}

Beide obigen Beispiele werden Last updated: 2017-01-01

Amutc Rohr

Aktiviert den UTC -Modus für nachfolgende Momentvorgänge (z. B. das Anzeigen der Zeit in UTC). 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{ '2016-12-31T23:00:00.000-01:00' | amUtc | amDateFormat: 'YYYY-MM-DD' }}
  `
} )

Drucke Last updated: 2017-01-01

Amparsezonrohr

Pariert eine Zeichenfolge, behält jedoch das resultierende Momentobjekt in einer festgelegten Zeitzone mit dem bereitgestellten Versatz in der Zeichenfolge. 

@ Component ( {
  selector : 'app' ,
  template : `
    Last updated: {{ '2016-12-31T23:00:00.000-03:00' | amParseZone | amDateFormat: 'LLLL (Z)' }}
  `
} )

Drucke Last updated: Saturday, December 31, 2016 11:00 PM (-03:00)

Amisbefore und Amisafter Pipe

Überprüfen Sie, ob ein Moment vor einem anderen Moment liegt. Unterstützt die Begrenzung der Granularität auf eine andere Einheit als Millisekunden, übergeben die Einheiten als zweiter Parameter 

@ Component ( {
  selector : 'app' ,
  template : `
    Today is before tomorrow: {{ today | amIsBefore:tomorrow:'day' }}
  `
} )

Drucke Today is before tomorrow: true 

@ Component ( {
  selector : 'app' ,
  template : `
    Tomorrow is after today: {{ tomorrow | amIsAfter:today:'day' }}
  `
} )

Drucke Tomorrow is after today: true

NgxMomentoptions

Ein NgxMomentOptions -Objekt kann dem Modul mithilfe der forRoot -Konvention zur Verfügung gestellt werden und bietet Optionen für die Rohre zur Verwendung mit der moment . Diese Optionen sind in der folgenden Tabelle aufgeführt:

Stütze Typ Beschreibung
relativetimethresholdoptions Wörterbuch
Schlüssel: String
Wert: Zahl		 Bietet die relativeTimeThreshold -Einheiten, sodass ein Rohr das moment.relativeTimeThreshold festlegen kann.

Der key ist eine Einheit, die als eine von ss , s , m , h , d , M definiert ist.

Weitere Informationen finden Sie unter relative Zeitschwellenwerte.

Vollständiges Beispiel 

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

Demo

Siehe Online -Demo auf Stackblitz

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle