乐趣区

关于angular:自定义管道

创立管道

ng g p play-count

实现管道

import {Pipe, PipeTransform} from '@angular/core';
//@Pipe 将类标记为一个管道,name 为调用该管道时应用的符号
@Pipe({name: 'playCount'})
export class PlayCountPipe implements PipeTransform {
  /*
 1. transfrom 中传入要转换的值
 2. 返回值为 number 或者 string
 */ transform(value: number): number | string {if (value > 10000) {return Math.floor(value / 10000) + '万';
 } else {return value;}
  }
}

应用管道

{{sheet.playCount | playCount}}

管道定义

管道是一些简略的 函数 ,能够在 模板表达式中 (双大括号) 用来承受输出值并返回一个转换后的值。
管道类首字母全大写。name 名首字母小写,其余首字母大写。

创立管道

  • 用 @Pipe 将类标记,并给定一个含有 name 字段的对象
  • 实现 PipeTransform 接口
退出移动版