xinxin?

Angular:管道和自定义管道

①管道的使用,更多管道在angular官网上有

<p>全部转为大写:{{'hahahah' | uppercase}}</p>
<p>保留两位小数:{{1.45555 | number:'1.1-2'}}</p>

②自定义管道

1、使用ng g pipe创建一个管道类文件

2、对pipes/pow.pipe.ts文件进行改造

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

@Pipe({
  name: 'pow'
})
export class PowPipe implements PipeTransform {

  transform(value: number,  exponent?: number): number {  //第二个参数还可以为...arg:unknown[]:
    return Math.pow(value, isNaN(exponent) ? 1 : exponent); //求传入数值的多少次方
  }

}

 3、组件中使用

<!-- 页面显示结果为8 -->
<p>{{2 | pow:3}}</p>

 

posted on 2020-08-01 16:37  xinxin?  阅读(226)  评论(0编辑  收藏  举报

导航