Практическое руководство: преобразование формата даты из /Date(xxxxxxxxxx)/ в пользовательский формат в Angular 2+

Проблема

Иногда во время разработки мы сталкиваемся с проблемами при форматировании файла. Date в Angular, который мы получаем со стороны сервера в результате вызова REST api.

В случае ASP .NET MVC мы можем создать контроллер с методом действия, который возвращает JsonResult (Официальная документация), а затем вызовите этот метод действия из Angular как API REST. Однако, если есть какое-либо свойство с типом System.DateTime в ответе json от API REST мы получаем дату в следующем формате:

/Дата(хххххххххххх)/

Обычно этот тип формата возвращается сериализатором .NET MVC json при сериализации. DateTime значение в формате JSON. Эта проблема не существует в WEB API 2, поскольку веб-API использует JSON.NET для сериализации DateTime, когда мы возвращаемся HTTP отклик. Не существует готового решения для преобразования этой даты в нашу собственную Date формат в Angular, используя встроенный DatePipe углового.

Поэтому нам нужно создать собственный канал в Angular для форматирования даты из /Дата(хххххххххххх)/ отформатируйте объект даты json с часовым поясом. Тогда мы можем использовать встроенный DatePipe angular, чтобы получить требуемый формат без разделения даты. Вот код для пользовательской трубы —

Решение

Пользовательский код канала даты

обычай-date.pipes.ts

import { Pipe, PipeTransform } from '@angular/core';
/*
 * Formats a /Date(xxxxxxxxxxxxx)/ into a JSON Date object
 * Takes an argument as input of actual date value in /Date(xxxxxxxxxxxxx)/ format.
 * Usage:
 *   date-value | customDateFormat
 * Example:
 *   {{ '/Date(1402034400000)/' | customDateFormat}}
*/
@Pipe({name: 'customDateFormat'}  )
export class CustomDateFormat implements PipeTransform {
  transform(value: any): Date {
       var customDate = new Date(value.match(/\d+/)[0] * 1);  
       return  customDate;
  }
}

Нам нужно импортировать этот пользовательский канал в наш корневой модуль (app.module.ts) также .

Пример кода компонента

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name="Angular 5";
  originalDate:string = '/Date(1524210579389)/';
}

Использование в HTML-шаблоне

app.component.html

<p>Original date: {{originalDate}}</p> <br>
<p>Custom date: {{originalDate | customDateFormat|date :'short'}}

Здесь мы использовали встроенный date :'short' pipe для повторного форматирования результата.

Вот конечный результат —

Custom date: 4/20/18, 1:19 PM

Образец рабочей демонстрации доступен ниже —

Демонстрация пользовательской трубы

Этот пример применим для Angular 2,4 и любых более поздних версий Angular. Однако мы можем создать эквивалентный пользовательский фильтр и в angular.js.

Удачного кодирования !!