动机

输出数据转换。它们确保数据在加载到用户屏幕上时处于理想的格式。通常，数据会在幕后进行转换。使用管道，转换数据可以在模板HTML中进行。管道直接转换模板数据。

管道看起来不错，方便。它们有助于保持组件类的基本转换。从技术上讲，管道封装了数据转换逻辑。

输出转换

如前一节所述，管道内联转换数据。管道语法与shell脚本相关联。在许多脚本中，命令的一部分的输出作为输入通过_管道传输_到下一部分作为输入。同样的趋势是角管的特征。

在Angular中，存在许多与模板HTML中的数据交互的方式。管道可以应用于将数据解析到模板HTML中的任何位置。它们可以在微结构逻辑和innerHTML变量插值中发生。管道可以解释所有转换而无需添加到组件类。

管道也是可链接的 。您可以一个接一个地集成管道，以执行日益复杂的转换。作为专业的数据变换器，管道几乎不是微不足道的。

用例

Angular预先包装了一套基本的管道。与其中几个人合作将发展直觉来处理其余的问题。以下列表提供了两个示例。

AsyncPipe
DatePipe

这两个执行简单的任务。它们的简单性非常有益。

AsyncPipe

本节要求对Promises或Observables有基本的了解，以便充分理解。 AsyncPipe可以在两者中的任何一个上运行。 AsyncPipe从Promises / Observables中提取数据作为下一步的输出。

对于Obervables，AsyncPipe会自动订阅数据源。无论数据来自何处，AsyncPipe都会订阅源可观察对象。 async是AsyncPipe的语法名称，如下所示。

<ul *ngFor=“let potato of (potatoSack$ | async); let i=index”>
  <li>Potatoe {{i + 1}}: {{potato}}</li>
 </ul>

在示例中， potatoSack$是一个Observable，等待上传土豆。一旦马铃薯同步或异步到达，AsyncPipe就会将它们作为_可迭代_数组接收。然后列表元素填满土豆。

DatePipe

格式化日期字符串需要使用JavaScript Date对象进行相当多的黑客攻击。假设给定输入是有效的时间格式，DatePipe提供了一种格式化日期的强大方法。

// example.component.ts

 @Component({
  templateUrl: './example.component.html'
 })
 export class ExampleComponent {
  timestamp:string = '2018-05-24T19:38:11.103Z';
 }

<!-- example.component.html -->

 <div>Current Time: {{timestamp | date:'short'}}</div>

上述timestamp的格式是ISO 8601 1 - 不是最容易阅读的。 DatePipe（ date ）将ISO日期格式转换为更传统的mm/dd/yy, hh:mm AM|PM 。还有许多其他格式选项。

创建管道

虽然Angular只有一定数量的管道，但@Pipe装饰器允许开发人员创建自己的管道。该过程从ng generate pipe [name-of-pipe] ，用一个优选的文件名替换[name-of-pipe] 。这是一个Angular CLI命令。它产生以下结果。

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

 @Pipe({
  name: 'example'
 })
 export class ExamplePipe implements PipeTransform {
  transform(value: any, args?: any): any {
      return null;
  }
 }

此管道模板简化了自定义管道创建。 @Pipe装饰器告诉Angular该类是一个管道。 name: 'example'的值name: 'example' ，在本例中是example ，是Angular在扫描自定义管道的模板HTML时识别的值。

关于类逻辑。 PipeTransform实现提供了transform函数的指令。此函数在@Pipe装饰器的上下文中具有特殊含义。它默认接收两个参数。

value: any是管道接收的输出。想想<div>{{ someValue | example }}</div> 。 someValue的值传递给transform函数的value: any参数。这与ExamplePipe类中定义的transform函数相同。

args?: any管道可选择接收的任何参数。想想<div>{{ someValue | example:[some-argument] }}</div> 。 [some-argument]可以被任何一个值替换。该值将传递给transform函数的args?: any参数。也就是说，在ExamplePipe的类中定义了transform函数。

无论函数返回什么（ return null; ）都成为管道操作的输出。查看下一个示例以查看ExamplePipe的完整示例。根据管道接收的变量，它将输入大写或小写为新输出。无效或不存在的参数将导致管道返回与输出相同的输入。

// example.pipe.ts

 @Pipe({
  name: 'example'
 })
 export class ExamplePipe implements PipeTransform {
  transform(value:string, args?:string): any {
    switch(args || null) {
      case 'uppercase':
        return value.toUpperCase();
      case 'lowercase':
        return value.toLowerCase();
      default:
        return value;
    }
  }
 }

// app.component.ts

 @Component({
  templateUrl: 'app.component.html'
 })
 export class AppComponent {
  someValue:string = "HeLlO WoRlD!";
 }

<!-- app.component.html -->

 <!-- Outputs “HeLlO WoRlD!” -->
 <h6>{{ someValue | example }}</h6>

 <!-- Outputs “HELLO WORLD!” -->
 <h6>{{ someValue | example:'uppercase' }}</h6>

 <!-- Outputs “hello world!” -->
 <h6>{{ someValue | example:'lowercase' }}</h6>

理解上面的示例意味着您了解Angular管道。还有一个话题要讨论。

纯净和不纯的管道

到目前为止，你所看到的一切都是_纯粹的_管道。 pure: true默认情况下在@Pipe装饰器的元数据中设置pure: true 。两者之间的差异构成了Angular的变化检测。

只要其派生输入的值发生更改，纯管道就会自动更新。管道将重新执行，以在输入值发生可检测的变化时产生新的输出。可检测的变化由Angular的变化检测循环确定。

每当发生更改检测周期时，Impure管道都会自动更新。 Angular的变化检测经常发生。它表示组件类的成员数据是否发生了更改。如果是这样，模板HTML将使用更新的数据进行更新。否则，什么都不会发生。

在不纯的管道的情况下，无论是否存在可检测的变化，它都将更新。更改检测循环时，不纯的管道会更新。不纯的管道通常消耗大量资源，通常是不明智的。也就是说，它们更像是逃生舱。如果您需要检测敏感管道，请在@Pipe装饰器的元数据中切换pure: false 。

结论

那涵盖了管道。管道有很多超出本文范围的潜力。管道为组件的模板HTML提供简洁的数据转换。在数据必须进行小规模转换的情况下，它们是很好的做法。

动机

输出转换

用例

AsyncPipe

DatePipe

创建管道

纯净和不纯的管道

结论

更多Angular教程