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

Question

创建了一个简单的有状态管道

@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 return this.fetchedValue。因为它只是一个字符串，所以它是 returned by value。稍后，当超时完成后，我只是将值 'done' 分配给属性（这也是私人）。

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

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

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

干杯

Answer 1

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

使用有状态管道，AngularJS 将 re-evaluate 每个事件的管道，因为即使输入相同，管道结果也可能发生变化。

对于纯管道，AngularJS 将触发变化检测并且 re-evaluate 只有当其中一个输入发生变化时（即传入的数据或参数）才会触发管道。

Answer 2

要理解这一点，我认为最好看看 Zone.js 上的演讲。基本上 angular 在 setTimeout 调用完成后（如果需要的话）使用一个名为 zone 的库来执行 $rootScope 摘要

不仅如此，即使在任何承诺解决之后，也会触发摘要循环。

这正是因为它不知道哪些属性可能发生了变化，所以它对整个应用程序进行了脏检查。

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

How does angular2 detect the changes in a stateful pipe?

frontend

typescript

angular