管道

管道是一些简单的函数，可以接受一个输入值并经过转化之后返回一个转换后的值。

管道在组件模板中的作用是格式化组件模板数据。

Angular内置的一些管道：

管道使用方式：

在模板表达式中使用管道操作符（|），紧接着是该管道的名字。

xxxxxxxxxx
<!-- 组件模板文件 -->
<p>
    <!-- 输出pipetest -->
    {{desc.title|lowercase}}<br/>
    <!-- 输出PIPETEST -->
    {{desc.title|uppercase}}<br/>
    <!-- 输出16% -->
    {{desc.num|percent}}<br/>
    <!-- 输出{ "title": "PipeTest", "num": 0.156, "date": "2050-04-14T16:00:00.000Z" }字符串 -->
    {{desc|json}}<br/>
    <!-- 输出Apr 15, 2050 -->
    {{desc.date|date}}<br/>
    <!-- 输出$10,000.00 -->
    {{desc.price|currency}}
</p>

xxxxxxxxxx
//组件类文件
export class PipeTestComponent implements OnInit {
  desc:any
  constructor() {
    this.desc={
      title:'PipeTest',
      num:0.156,
      date:new Date(2050, 3, 15),
      price:10000
    }
  }
  ngOnInit(): void {
  }
}

使用管道参数：

既然管道是一个函数，那就可以给它传递参数，从而改变管道的输出。

给管道添加参数的方式如下：输入 | 管道名：参数名：参数名，管道的参数可以有多个，多个参数使用冒号隔开。

xxxxxxxxxx
<!-- 组件模板文件 -->
<p>
    <!-- 输出2050-04-15 -->
  {{desc.date|date:'yyyy-MM-dd'}}<br/>  
    <!-- 输出￥10,000.00 -->
  {{desc.price|currency:'￥'}}
</p>

串联管道

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

xxxxxxxxxx
<!-- 组件模板文件 -->
<p>
    <!-- 输出APR 15, 2050 -->
    <!-- uppercase的输入是date管道的输出 -->
    {{desc.date|date|uppercase}}
</p>
   

实时效果反馈

1.下列描述错误的是：

A 管道是用来转化数据的

B 管道可以传递参数

C 管道不可以串联

答案

1=>C