Angular 2 有状态管道
示例
Angular2提供了两种不同类型的管道-无状态管道和有状态管道。默认情况下，管道是无状态的。但是，我们可以通过将pure属性设置为来实现有状态管道false。如您在参数部分所看到的，您可以指定aname并声明管道是否应为纯管道，这意味着有状态或无状态。尽管数据流经一个不会记住任何内容的无状态管道（这是一个纯函数），但可以通过有状态管道来管理和记住数据。有状态管道的一个很好的例子AsyncPipe是Angular2提供的。
重要
请注意，大多数管道应属于无状态管道类别。由于性能原因，这一点很重要，因为Angular可以为变更检测器优化无状态管道。因此，请谨慎使用有状态管道。通常，与Angular1.x中的过滤器相比，Angular2中的管道优化具有重大的性能增强。在Angular1中，即使数据完全没有变化，摘要循环也总是必须重新运行所有过滤器。在Angular2中，一旦计算出管道的值，变化检测器就知道除非输入发生变化，否则不会再次运行该管道。
有状态管道的实现
import {Pipe, PipeTransform, OnDestroy} from '@angular/core';
@Pipe({
name: 'countdown',
pure: false
})
export class CountdownPipe implements PipeTransform, OnDestroy {
private interval: any;
private remainingTime: number;
transform(value: number, interval: number = 1000): number {
if (!parseInt(value, 10)) {
return null;
}
if (typeofthis.remainingTime!== 'number') {
this.remainingTime= parseInt(value, 10);
}
if (!this.interval) {
this.interval= setInterval(() => {
this.remainingTime--;
if (this.remainingTime <= 0) {
this.remainingTime= 0;
clearInterval(this.interval);
delete this.interval;
}
}, interval);
}
return this.remainingTime;
}
ngOnDestroy(): void {
if (this.interval) {
clearInterval(this.interval);
}
}
}然后，您可以照常使用管道：
{{ 1000 | countdown:50 }}
{{ 300 | countdown }}重要的是您的管道还必须实现该OnDestroy接口，以便一旦管道被破坏就可以清理。在上面的示例中，有必要清除间隔以避免内存泄漏。