ใน AngularJS ฉันสามารถใช้ตัวกรอง (ไปป์) ภายในบริการและตัวควบคุมโดยใช้ไวยากรณ์ที่คล้ายกับสิ่งนี้:

$filter('date')(myDate, 'yyyy-MM-dd');

เป็นไปได้ไหมที่จะใช้ท่อในบริการ / ส่วนประกอบเช่นนี้ในแองกูลาร์

ตามปกติใน Angular คุณสามารถพึ่งพาการฉีดพึ่งพา:

import { DatePipe } from '@angular/common';

class MyService {

  constructor(private datePipe: DatePipe) {}

  transformDate(date) {
    return this.datePipe.transform(date, 'yyyy-MM-dd');
  }
}

เพิ่มDatePipeไปยังรายชื่อผู้ให้บริการของคุณในโมดูลของคุณ; หากคุณลืมทำเช่นนี้คุณจะได้รับข้อผิดพลาดno provider for DatePipe:

providers: [DatePipe,...]

อัปเดต Angular 6 : Angular 6 ตอนนี้มีฟังก์ชั่นการจัดรูปแบบค่อนข้างมากที่ใช้โดยไพพ์สาธารณะ ตัวอย่างเช่นตอนนี้คุณสามารถใช้formatDateฟังก์ชันได้โดยตรง

import { formatDate } from '@angular/common';

class MyService {

  constructor(@Inject(LOCALE_ID) private locale: string) {}

  transformDate(date) {
    return formatDate(date, 'yyyy-MM-dd', this.locale);
  }
}

ก่อน Angular 5 : ได้รับการเตือนแม้ว่าจะDatePipeใช้กับ Intl API จนถึงรุ่น 5 ซึ่งเบราว์เซอร์ทั้งหมดไม่รองรับ (ตรวจสอบตารางความเข้ากันได้ )

หากคุณใช้แองกูลาร์เวอร์ชันเก่าคุณควรเพิ่มIntlpolyfill ในโครงการของคุณเพื่อหลีกเลี่ยงปัญหาใด ๆ ดูคำถามที่เกี่ยวข้องนี้สำหรับคำตอบโดยละเอียดเพิ่มเติม

คำตอบนี้ล้าสมัยแล้ว

แนะนำให้ใช้วิธี DI จากคำตอบอื่นแทนวิธีนี้

คำตอบเดิม:

คุณควรใช้คลาสได้โดยตรง

new DatePipe().transform(myDate, 'yyyy-MM-dd');

ตัวอย่างเช่น

var raw = new Date(2015, 1, 12);
var formatted = new DatePipe().transform(raw, 'yyyy-MM-dd');
expect(formatted).toEqual('2015-02-12');

ใช่เป็นไปได้โดยใช้ไพพ์แบบกำหนดเองอย่างง่าย ข้อดีของการใช้ไพพ์แบบกำหนดเองคือถ้าเราต้องการอัปเดตรูปแบบวันที่ในอนาคตเราสามารถไปและอัปเดตไฟล์เดียว

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
    name: 'dateFormatPipe',
})
export class dateFormatPipe implements PipeTransform {
    transform(value: string) {
       var datePipe = new DatePipe("en-US");
        value = datePipe.transform(value, 'MMM-dd-yyyy');
        return value;
    }
}

{{currentDate | dateFormatPipe }}

คุณสามารถใช้ไปป์นี้ได้ทุกที่ส่วนประกอบบริการ ฯลฯ

ตัวอย่างเช่น

export class AppComponent {
  currentDate : any;
  newDate : any;
  constructor(){
    this.currentDate = new Date().getTime();
    let dateFormatPipeFilter = new dateFormatPipe();
    this.newDate = dateFormatPipeFilter.transform(this.currentDate);
    console.log(this.newDate);
}

อย่าลืมที่จะนำเข้าการอ้างอิง

import { Component } from '@angular/core';
import {dateFormatPipe} from './pipes'

ตัวอย่าง Pipe แบบกำหนดเองและข้อมูลเพิ่มเติม

คำตอบอื่น ๆ ไม่ทำงานในเชิงมุม 5?

ฉันพบข้อผิดพลาดเนื่องจาก DatePipe ไม่ใช่ผู้ให้บริการดังนั้นจึงไม่สามารถฉีดได้ ทางออกหนึ่งคือการวางไว้ในฐานะผู้ให้บริการในโมดูลแอพของคุณ แต่โซลูชันที่ฉันต้องการคือการยกตัวอย่าง

ยกตัวอย่างเมื่อจำเป็น:

ฉันดูที่ซอร์สโค้ดของ DatePipe เพื่อดูว่ามีโลแคลนี้อย่างไร: https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174

ฉันต้องการใช้ภายในท่อดังนั้นตัวอย่างของฉันจึงอยู่ในท่ออื่น:

import { Pipe, PipeTransform, Inject, LOCALE_ID } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
    name: 'when',
})
export class WhenPipe implements PipeTransform {
    static today = new Date((new Date).toDateString().split(' ').slice(1).join(' '));
    datePipe: DatePipe;

    constructor(@Inject(LOCALE_ID) private locale: string) {
        this.datePipe = new DatePipe(locale);
    }
    transform(value: string | Date): string {
        if (typeof(value) === 'string')
            value = new Date(value);

        return this.datePipe.transform(value, value < WhenPipe.today ? 'MMM d': 'shortTime')
    }
}

กุญแจสำคัญในที่นี้คือการนำเข้า Inject และ LOCALE_ID จากแกนของเชิงมุมแล้วทำการฉีดเพื่อให้คุณสามารถให้ DatePipe เพื่ออินสแตนซ์ของมันอย่างถูกต้อง

ทำให้ DatePipe เป็นผู้ให้บริการ

ในโมดูลแอปของคุณคุณสามารถเพิ่ม DatePipe ในอาร์เรย์ผู้ให้บริการของคุณเช่นนี้:

import { DatePipe } from '@angular/common';

@NgModule({
    providers: [
        DatePipe
    ]
})

ตอนนี้คุณสามารถฉีดเข้าไปใน Constructor ของคุณได้ตามต้องการ (เช่นในคำตอบของ cexbrayat)

สรุป:

วิธีแก้ปัญหาทั้งสองทำงานฉันไม่ทราบว่ามุมใดมุมหนึ่งที่จะพิจารณาว่า "ถูกต้อง" ส่วนใหญ่ แต่ฉันเลือกที่จะสร้างอินสแตนซ์ด้วยตนเองเนื่องจากมุมไม่ได้ให้ Datepipe เป็นผู้ให้บริการเอง

หากคุณไม่ต้องการทำ 'new myPipe ()' เพราะคุณต้องการฉีดไปป์ไลน์คุณสามารถฉีดส่วนประกอบเช่นผู้ให้บริการและใช้งานได้โดยไม่ต้องมีอะไรใหม่

ตัวอย่าง:

// In your component...

import { Component, OnInit } from '@angular/core';
import { myPipe} from './pipes';

@Component({
  selector: 'my-component',
  template: '{{ data }}',
  providers: [ myPipe ]
})
export class MyComponent() implements OnInit {
  data = 'some data';
  constructor(private myPipe: myPipe) {}

  ngOnInit() {
    this.data = this.myPipe.transform(this.data);
  }
}

หากคุณต้องการใช้ไปป์ที่กำหนดเองในส่วนประกอบของคุณคุณสามารถเพิ่ม

@Injectable({
  providedIn: 'root'
})

บันทึกย่อไปยังไปป์ที่คุณกำหนดเอง จากนั้นคุณสามารถใช้เป็นบริการ

ตั้งแต่ Angular 6 คุณสามารถนำเข้าformatDateจาก@angular/commonยูทิลิตี้เพื่อใช้ภายในส่วนประกอบ

มันถูกบุกรุกที่https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae

ฉันสามารถใช้เป็น:

import {formatDate} from '@angular/common';
formatDate(new Date(), 'd MMM yy HH:mm', 'en');

แม้ว่าสถานที่จะต้องมีการจัด

คุณสามารถใช้ formatDate () เพื่อจัดรูปแบบวันที่ในบริการหรือส่วนประกอบ ts ไวยากรณ์: -

formatDate(value: string | number | Date, format: string, locale: string, timezone?: string): string

นำเข้า formatDate () จากโมดูลทั่วไปเช่นนี้

import { formatDate } from '@angular/common';

และใช้ในชั้นเรียนเช่นนี้

formatDate(new Date(), 'MMMM dd yyyy', 'en');

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

formatDate(new Date(), 'shortDate', 'en');

คุณสามารถดูตัวเลือกรูปแบบที่กำหนดไว้ล่วงหน้าอื่น ๆ ได้ที่นี่

https://angular.io/api/common/DatePipe