angular管道多种用法

angular管道多种用法

管道参数化

// ts文件
public birstday = new Date()

private flag:boolean = false;
  get format(){
    return this.flag ? "yyyy-MM-dd" : "yyyy/MM/dd"
  }

// html文件
{
  {birstday | date }}
{
  {birstday | date:'yyyy-MM-dd'}}
<!-- 管道参数化 -->
{
  {birstday | date:format}}

链式管道

<!-- 链式管道 多层管道 变成大写的了 -->
    {
  {birstday | date | uppercase}}

自定义管道

1. 创建自定义管道文件：
   hello-self-pipe.ts

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

@Pipe({name:"myFormat"})
export class MyFormatPipe implements PipeTransform {
    transform(value:any, ...args:any[] ){
        if(args.length < 2){
            args = ['<--','---<<<'];
        }
        return args[0] + ' ' &