7.2 KiB
| title | localeTitle |
|---|---|
| Pipes | 管道 |
管道
动机
输出数据转换。它们确保数据在加载到用户屏幕上时处于理想的格式。通常，数据会在幕后进行转换。使用管道，转换数据可以在模板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提供简洁的数据转换。在数据必须进行小规模转换的情况下，它们是很好的做法。