Angluar4常用的管道

日期管道和小数管道

<p>我的生日是{{birthday | date:'yyyy-MM-dd HH:mm:ss'}}</p>
<p>圆周率 {{pi | number:'.2-4'}} </p>//值得注意的是.2-4表示保留2-4位小数

export class BindComponent implements OnInit {
  birthday:Date = new Date
  pi:number=3.1415926
  size:number = 7
  constructor(){
  }
  ngOnInit() {
  }
}

货币和大小写转换

<p>{{a|currency:'CNY':true}}</p>
<p>{{b|currency:'USD':true}}</p>
<p>将字符串转换为大写{{str|uppercase}}</p>

自定义管道

ng g pipe pipe/multipe

multiple.pipe.ts里面

@Pipe({
  name: 'multiple'
})
export class MultiplePipe implements PipeTransform {
  transform(value: any, args?: any): any {
  
    return value*args;
  }
}

记得在bind.components.ts里面定义size

<p>试试我自己写的管道{{size | multiple:'2'}}</p>