天天看點

angular 管道 pipe

我們來做個時間格式化的管道,

1.在app/pipes檔案夾下建立date-transform.pipe.ts檔案,并且添加如下代碼

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({ name: 'dateTransform' })
export class DateTransformPipe implements PipeTransform {
  transform(date:Date|string,format:string) {
     if(!date){
       return date;
     }
     return moment(date).format(format);
   
  }
}
           

2.在app.module.ts中

@NgModule({
  declarations: [
    ...
    DateTransformPipe
  ],
  ...
})
           

3.使用 

guaranteeDate:string | Date = new Date('2019-10-11');

<div class="price">¥{{guaranteeDate | dateTransform: 'YYYY-MM-DD HH:mm:ss' }}</div>
           

參開文獻:angular官網-管道