function() { //first call the original callback callback(...); // and then run Angular-specific functionality var changed = angular.runChangeDetection(); if (changed) { angular.reRenderUIPart();
@Component({selector:'tooltip',template:`{{config.position}}{{runChangeDetection}}`,changeDetection:ChangeDetectionStrategy.OnPush})exportclassTooltipComponent{@Input()config;getrunChangeDetection() {console.log('Checking the view');returntrue;}} @Component({template:`<tooltip [config]="config"></...
runChangeDetection(); if (changed) { angular2.reRenderUIPart(); } }); } 几乎所有的浏览器 API 都被 patch 了,比如你能想到的所有浏览器事件,以及 setTimeout、setInterval,还有 Ajax 请求等等。 所有的 patch 工作都交给 Angular 自带的 zone.js (NgZone 和 zone.js 是有差别的,为了便于说明理解,...
比如runOutsideAngular + DOM manipulation,虽然直接操作 DOM 违背了 MVVM 的理念,但是范围可控的话,也是可以考虑的 trade-off 选项。 如果许多地方都性能焦虑,那就把所有组件 ChangeDetectionStrategy 设置成 OnPush。 在组件内,如果是 after DOM event 修改 ViewModel,那我们啥啥也不需要做。 如果是 after 非 DOM...
component **/@ViewChild('el',{static:true})el:ElementRef;constructor(private zone:NgZone,prviate cdr:ChangeDetectorRef){}OnInit(){ this.zone.runOutsideAngular(()=>{ fromEvent(this.el.natvieElement,'scroll').subscribe((e)=>{... if(...){ ... this.cdr.detectChange() } ...
// very simplified version of actual sourceclass ApplicationRef { changeDetectorRefs:ChangeDetectorRef[] = []; constructor(private zone: NgZone) { this.zone.onTurnDone .subscribe(() => this.zone.run(() => this.tick()); } tick() { this.changeDetectorRefs .forEach((r...
var changed = angular2.runChangeDetection(); if (changed) { angular2.reRenderUIPart(); } }); } 谁通知 Angular 更新视图 Zone负责通知 Angular 进行视图更新,Angular 封装有NgZone,简单来说,通过 Angular 的部分源码我们可以知道有一个叫作ApplicationRef的东西负责监听 NgZone 中的onTurnDone事件,每当该事...
But only 1 & 2 are still not enough for Change Detection. Because the application state is what we get from BE, it is good to keep it immutable and reuse the old object reference as much as possible, but what we pass into component arenot Application state,it is View model state. Thi...
现在更改检测会检查带有 ChangeDetectionStrategy.OnPush 的 HeroCardOnPushComponent。 为防止更改检测错误,一个小技巧是在构建应用程序时只使用不可变的对象和列表,然后在所有地方都使用 OnPush 更改检测。不可变对象只能通过创建新的对象引用来修改,因此我们可以保证: ...
Change Detection (变化检测) 是 Angular 2 中最重要的一个特性。当组件中的数据发生变化的时候,Angular 2 能检测到数据变化并自动刷新视图反映出相应的变化。 那么,Angular 2 是如何知道数据发生了改变?又是如何知道需要修改的 DOM 位置,准确地用最小范围去修改 DOM 呢?