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

Question

我基于管道上的Angular.io教程创建了一个简单的有状态管道:

@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]
           })

我的问题是,我马上就回来this.fetchedValue了#transform.因为它只是一个字符串,所以它是按值返回的.稍后,当超时结束时,我只是将值赋给'done'属性(也是私有的).

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

它唯一的线索是pure == false,我猜它指示它观察实例的变化.但我不知道它有关于哪个领域的信息 .

但它的确有效!我不明白为什么.

干杯

Answer 1

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

使用有状态管道,AngularJS将在每个事件上重新评估管道,因为即使使用相同的输入,管道结果也可能会发生变化.

使用纯管道,只有当其中一个输入发生变化(即数据进入或args)时,AngularJS才会触发变化检测并重新评估管道.