自定义管道

Angular 2允许创建你自己的管道:

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

每个自定义管道实现必须:

  • 使@Pipe装饰器包含具有name属性的管道元数据。 此值将用于在模板表达式中调用此管道。 它必须是有效的JavaScript标识符。
  • 实现PipeTransform接口的transform方法。 此方法接受管道的值和任何类型的可变数量的参数,并返回一个变换的(“管道”)值。

模板中的每个以冒号分隔的参数按相同的顺序映射到一个方法参数。

  1. import { Component } from '@angular/core';
  2. {% raw %}
  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. {% endraw %}
  12. export class AppComponent {
  13. fileSizes = [10, 100, 1000, 10000, 100000, 10000000, 10000000000];
  14. largeFileSize = Math.pow(10, 15)
  15. }

View Example