「这是我参与2022首次更文挑战的第26天，活动详情查看：2022首次更文挑战」

先把管道这一概念官网详细解释放在这里，下面把我的理解放在这里进行记录，留做日后查看参考使用。管道的用途简单来说就是格式化数据。 这里就写几种常见的，如果有兴趣继续深入了解可以去官网看看。

基本使用

应用管道，在模板表达式中使用管道操作符（|），紧接着是该管道的名字，代码{{today | date:'yyyy-MM-dd HH:mm:ss'}} 中，today是变量名称，date是格式化类型，后面字符串是具体是格式化具体格式。

HTML文件中

    <p>
        <span style="color: burlywood;">管道写法：</span> 
        {{today | date:'yyyy-MM-dd  HH:mm:ss'}} <br>
        <a href="https://angular.cn/api/common/DatePipe">日期格式</a>
    </p>

ts文件

  public today:any = new Date();

格式化日期

从刚刚基本使用的案例中我们发现最后的格式不一样显示的结果也不一样，那么这些具体有什么区别？这里有一张图片可以供大家参考。

如果大家上面的表看的不是特别理解，可以简单的来说：
年份：yyyy - 2022, yy- 22,
月份,日,小时，分钟，秒钟：叠着写表示0-9前面会加上0，单着写则不加：
M代表月，d代表日，H代表小时，m表达分钟，s代表秒。MM代表02月，M代表2月，mm代表05分，m代表5分,如同下面代码对于的图片所示。
星期，月份英文：四个是全称，三个是缩写
EEEE(星期英文),MMMM(月份英文)，EEEE(星期英文缩写),MMMM(月份英文缩写)

{{today | date:'yyyy-MM-dd  HH:mm:ss'}} <br>
{{today | date:'yy-M-d  HH:mm:ss a'}} 
<span style="margin:0  50px;">|</span>
{{today | date:'EEEE,y-MMMM-d'}} 
<span style="margin:0  50px;">|</span>
{{today | date:'EEEE,y-MMM-d'}}

字符串大小写转换

uppercase将字符串转换成大写，lowercase将字符串转换成小写

 JS
 public pipesString:string = 'I like English!'
 
 HTML
<p>{{pipesString | uppercase }}</p>
<p>{{pipesString | lowercase }}</p>

数字操作

currency把数字转换成货币字符串

<p>{{pipesMoney | currency }}</p>

number:'1.3-5'把数字转换成带小数点的字符串，这里的3是最少小数点后三位，例如505，小数点后面没有，转换后就成为505.000，这里的5是小数点后最多有五位，例如505.946811462，小数点后超过5位就截断多余的位数，是截断不是四舍五入！

<p>{{pipesNumOne}}---{{pipesNumOne | number:'1.3-5' }}</p>
<p>{{pipesNumTwo}}---{{pipesNumTwo | number:'1.3-5' }}</p>

percent把数字转换成百分比字符串

<p>{{pipesTrans}}---{{pipesTrans | percent }}</p>

通过串联管道应用两种格式

可以对管道进行串联，以便一个管道的输出成为下一个管道的输入。

<p>{{pipesTime}}---{{pipesTime | date | uppercase }}</p>

angular——用管道转换数据

基本使用

格式化日期

字符串大小写转换

数字操作

通过串联管道应用两种格式