Trong AngularJS, tôi có thể sử dụng các bộ lọc (đường ống) bên trong các dịch vụ và bộ điều khiển bằng cú pháp tương tự như sau:

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

Có thể sử dụng đường ống trong các dịch vụ / thành phần như thế này trong Angular không?

Như thường lệ trong Angular, bạn có thể dựa vào tiêm phụ thuộc:

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

class MyService {

  constructor(private datePipe: DatePipe) {}

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

Thêm vào DatePipedanh sách nhà cung cấp của bạn trong mô-đun của bạn; nếu bạn quên làm điều này, bạn sẽ gặp lỗi no provider for DatePipe:

providers: [DatePipe,...]

Cập nhật Angular 6 : Angular 6 hiện cung cấp khá nhiều chức năng định dạng được sử dụng bởi các đường ống một cách công khai. Ví dụ, bây giờ bạn có thể sử dụng formatDatechức năng trực tiếp.

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

class MyService {

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

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

Trước Angular 5 : Được cảnh báo mặc dù việc DatePipedựa vào API Intl cho đến phiên bản 5, không được tất cả các trình duyệt hỗ trợ (kiểm tra bảng tương thích ).

Nếu bạn đang sử dụng các phiên bản Angular cũ hơn, bạn nên thêm Intlpolyfill vào dự án của mình để tránh mọi vấn đề. Xem câu hỏi liên quan này để có câu trả lời chi tiết hơn.

Câu trả lời này đã lỗi thời

khuyên bạn nên sử dụng phương pháp DI từ các câu trả lời khác thay vì phương pháp này

Câu trả lời gốc:

Bạn sẽ có thể sử dụng lớp trực tiếp

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

Ví dụ

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

Có, có thể bằng cách sử dụng một đường ống tùy chỉnh đơn giản. Ưu điểm của việc sử dụng đường ống tùy chỉnh là nếu chúng ta cần cập nhật định dạng ngày trong tương lai, chúng ta có thể đi và cập nhật một tệp duy nhất.

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 }}

Bạn luôn có thể sử dụng đường ống này ở bất cứ đâu, thành phần, dịch vụ, v.v.

Ví dụ

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

Đừng quên nhập phụ thuộc.

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

Ví dụ ống tùy chỉnh và thông tin thêm

Câu trả lời khác không hoạt động trong góc 5?

Tôi đã gặp lỗi vì DatePipe không phải là nhà cung cấp, vì vậy nó không thể được tiêm. Một giải pháp là đặt nó làm nhà cung cấp trong mô-đun ứng dụng của bạn nhưng giải pháp ưa thích của tôi là khởi tạo nó.

Khởi tạo nó khi cần thiết:

Tôi đã xem mã nguồn của DatePipe để xem làm thế nào nó có được miền địa phương: https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174

Tôi muốn sử dụng nó trong một đường ống, vì vậy ví dụ của tôi là trong một đường ống khác:

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

Chìa khóa ở đây là nhập Tiêm và LOCALE_ID từ lõi của góc, sau đó tiêm vào đó để bạn có thể đưa nó cho DatePipe để khởi tạo nó đúng cách.

Biến DatePipe thành nhà cung cấp

Trong mô-đun ứng dụng của bạn, bạn cũng có thể thêm DatePipe vào mảng nhà cung cấp của mình như thế này:

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

@NgModule({
    providers: [
        DatePipe
    ]
})

Bây giờ bạn có thể chỉ cần đưa nó vào hàm tạo của bạn khi cần (như trong câu trả lời của cexbrayat).

Tóm lược:

Dù là giải pháp hiệu quả, tôi không biết một góc nào sẽ coi là "chính xác" nhất nhưng tôi đã chọn khởi tạo nó một cách thủ công vì góc không cung cấp datepipe như chính nhà cung cấp.

Nếu bạn muốn sử dụng đường ống tùy chỉnh trong các thành phần của mình, bạn có thể thêm

@Injectable({
  providedIn: 'root'
})

chú thích cho ống tùy chỉnh của bạn. Sau đó, bạn có thể sử dụng nó như một dịch vụ

Nếu bạn không muốn làm 'myPipe ()' mới vì bạn đang tiêm phụ thuộc vào đường ống, bạn có thể tiêm vào thành phần như nhà cung cấp và sử dụng mà không cần mới.

Thí dụ:

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

Kể từ Angular 6, bạn có thể nhập formatDatetừ @angular/commontiện ích để sử dụng bên trong các thành phần.

Nó đã bị xâm nhập tại https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae

Tôi có thể được sử dụng như:

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

Mặc dù địa phương phải được cung cấp

Bạn có thể sử dụng formatDate () để định dạng ngày trong các dịch vụ hoặc thành phần ts. cú pháp: -

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

nhập formatDate () từ mô-đun phổ biến như thế này,

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

và chỉ sử dụng nó trong lớp như thế này,

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

Bạn cũng có thể sử dụng các tùy chọn định dạng được xác định trước được cung cấp bởi góc như thế này,

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

Bạn có thể thấy tất cả các tùy chọn định dạng được xác định trước khác ở đây,

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