状态管道

有两种类型的管道:

  • 无状态管道是纯粹的功能,通过输入数据流动而不记住任何东西或引起可检测的副作用。 大多数管道是无状态的。 我们使用的CurrencyPipe和我们创建的长度管是无状态管的示例。
  • 状态管道是能够管理它们转换的数据的状态的管道。 创建HTTP请求,存储响应并显示输出的管道是有状态的管道。 有状态管道应谨慎使用。

Angular 2提供 AsyncPipe,这是有状态的。

AsyncPipe

AsyncPipe可以接收PromiseObservable作为输入,并自动订阅输入,最终返回发射的值。 它是有状态的,因为管道维护对输入的预订,并且其返回值取决于该预订。

  1. {% raw %}
  2. @Component({
  3. selector: 'app-root',
  4. template: `
  5. <p>Total price of product is {{fetchPrice | async | currency:"CAD":true:"1.2-2"}}</p>
  6. <p>Seconds: {{seconds | async}} </p>
  7. `
  8. })
  9. {% endraw %}
  10. export class AppComponent {
  11. fetchPrice = new Promise((resolve, reject) => {
  12. setTimeout(() => resolve(10), 500);
  13. });
  14. seconds = Observable.of(0).concat(Observable.interval(1000))
  15. }

View Example

实现有状态管道

默认情况下,管道是无状态的。 我们必须通过将@Pipe装饰器的pure属性设置为false来声明一个管道是有状态的。 这个设置告诉Angular的变化检测系统每个周期检查这个管道的输出,无论它的输入是否改变。

  1. // naive implementation assumes small number increments
  2. @Pipe({
  3. name: 'animateNumber',
  4. pure: false
  5. })
  6. export class AnimateNumberPipe implements PipeTransform {
  7. private currentNumber: number = null; // intermediary number
  8. private targetNumber: number = null;
  9. transform(targetNumber: number): string {
  10. if (targetNumber !== this.targetNumber) {
  11. this.currentNumber = this.targetNumber || targetNumber;
  12. this.targetNumber = targetNumber;
  13. const difference = this.targetNumber - this.currentNumber
  14. Observable.interval(100)
  15. .take(difference)
  16. .subscribe(() => {
  17. this.currentNumber++;
  18. })
  19. }
  20. return this.currentNumber;
  21. }
  22. }

View Example