angular - angular2 如何检测有状态管道的变化？

Question

我基于 Angular.io tutorial on pipes 创建了一个简单的有状态管道:

@Pipe({
    name: 'fetch',
    pure: false
})

class FetchJsonPipe  implements PipeTransform{
    private fetchedValue = 'waiting';
    private fetchedValue2 = 'waiting2';

    transform(value:string, args:string[]):any {
        setTimeout(() => {
            this.fetchedValue = 'done';
            this.fetchedValue2 = 'done2';
        }, 3000);
        return this.fetchedValue2;
    }
}

@Component({ selector: 'sd-splash'
           , template: 'hello ng2 {{ "5" | fetch }}'
           , pipes: [FetchJsonPipe]
           })

我的问题是，我立即从 #transform 返回 this.fetchedValue。由于它只是一个字符串，因此按值 返回。稍后，当超时完成后，我只是将值 'done' 分配给一个属性(这也是私有(private))。

Angular2 如何知道初始结果 'waiting' 不是最终结果？如何它知道更新后的值可以通过 #fetchedValue 获得吗？ promise 根本没有暴露，Angular2 没有关于名称的信息我存储结果的字段。

它拥有的唯一线索是 pure == false，我猜这是指示它观察实例的变化。但我不明白它是如何获得信息的要观看哪个字段。

但它有效!我不知道为什么。

干杯

Answer 1

Angular monkey 使用名为 Zone.js 的库修补浏览器事件(包括 setTimeout())。当事件发生时，AngularJS 会触发变更检测。

对于有状态管道，AngularJS 将在每​​个事件上重新评估管道，因为即使输入相同，管道结果也可能发生变化。

对于纯管道，AngularJS 将触发变化检测并仅在其中一个输入发生变化(即传入的数据或参数)时重新评估管道。