Custom Pipes

Angular allows you to create your own custom pipes:

  1. import { Pipe, PipeTransform } from '@angular/core';
  3. const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
  4. const FILE_SIZE_UNITS_LONG = ['Bytes', 'Kilobytes', 'Megabytes', 'Gigabytes', 'Pettabytes', 'Exabytes', 'Zettabytes', 'Yottabytes'];
  6. @Pipe({
  7.   name: 'formatFileSize'
  8. })
  9. export class FormatFileSizePipe implements PipeTransform {
  10.   transform(sizeInBytes: number, longForm: boolean): string {
  11.     const units = longForm
  12.       ? FILE_SIZE_UNITS_LONG
  13.       : FILE_SIZE_UNITS;
  15.     let power = Math.round(Math.log(sizeInBytes) / Math.log(1024));
  16.     power = Math.min(power, units.length - 1);
  18.     const size = sizeInBytes / Math.pow(1024, power); // size in new units
  19.     const formattedSize = Math.round(size * 100) / 100; // keep up to 2 decimals
  20.     const unit = units[power];
  22.     return `${formattedSize} ${unit}`;
  23.   }
  24. }

Each custom pipe implementation must:

  • have the @Pipe decorator with pipe metadata that has a name property. This value will be used tocall this pipe in template expressions. It must be a valid JavaScript identifier.
  • implement the PipeTransform interface's transform method. This method takes the value being pipedand a variable number of arguments of any type and return a transformed ("piped") value.
    Each colon-delimited parameter in the template maps to one method argument in the same order.
  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'app-root',
  5.   template: `
  6.     <div>
  7.       <p *ngFor="let f of fileSizes">{{ f | formatFileSize }}</p>
  8.       <p>{{ largeFileSize | formatFileSize:true }}</p>
  9.     </div>`
  10. })
  11. export class AppComponent {
  12.   fileSizes = [10, 100, 1000, 10000, 100000, 10000000, 10000000000];
  13.   largeFileSize = Math.pow(10, 15)
  14. }

View Example

原文: https://angular-2-training-book.rangle.io/handout/pipes/custom_pipes.html