// and then run Angular-specific functionality var changed = angular.runChangeDetection(); if (changed) { angular.reRenderUIPart(); } }); } 新版本 addEventListener为任何事件处理程序添加了更多功能:不仅调用了注册的回调,而且 Angular 有机会运行更改检测和更新 UI。 这种低级运行时的 patch 动作是如何...
function() { //first call the original callback callback(...); // and then run Angular-specific functionality var changed = angular.runChangeDetection(); if (changed) { angular.reRenderUIPart();
// 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...
// run change detection on child views (components) execComponentViewsAction(view, ViewAction.CheckAndUpdate); // call AfterViewChecked and AfterViewInit hooks callLifecycleHooksChildrenFirst(…, NodeFlags.AfterViewChecked…); ... } 正如你所见, Angular 同样在变更检测期间触发了生命周期钩子。有趣...
// 这是新版本的addEventListenerfunctionaddEventListener(eventName,callback){// 调用真正的addEventListenercallRealAddEventListener(eventName,function(){// 首先调用原本的回调函数callback(...);// 之后调用Angular指定的功能varchanged=angular2.runChangeDetection();if(changed){angular2.reRenderUIPart();}});...
runChangeDetection(); } 需要注意的是,数字,布尔值,字符串,null和undefined是原始类型。所有原始类型均按值传递。对象,数组和函数也按值传递,但该值是引用的副本。 因此,为了触发组件中的更改检测,我们需要更改对象引用。如下: @Component({template:`<tooltip[config]="config"></tooltip>`})exportclassAppCompon...
var changed = angular2.runChangeDetection(); if (changed) { angular2.reRenderUIPart(); } }); } 谁通知 Angular 更新视图 Zone负责通知 Angular 进行视图更新,Angular 封装有NgZone,简单来说,通过 Angular 的部分源码我们可以知道有一个叫作ApplicationRef的东西负责监听 NgZone 中的onTurnDone事件,每当该事...
使用NgZone.runOutsideAngular()方法:在组件中注入NgZone,并在单击事件处理程序中使用runOutsideAngular()方法来运行代码。这将使代码在Angular的变更检测之外运行,从而避免触发change detection。 示例代码: 代码语言:typescript 复制 import{Component,NgZone}from'@angular/core';@Component({selector:'app-example',te...
比如runOutsideAngular + DOM manipulation,虽然直接操作 DOM 违背了 MVVM 的理念,但是范围可控的话,也是可以考虑的 trade-off 选项。 如果许多地方都性能焦虑,那就把所有组件 ChangeDetectionStrategy 设置成 OnPush。 在组件内,如果是 after DOM event 修改 ViewModel,那我们啥啥也不需要做。
"Angular has to be conservative and run all the checks every single time because the JavaScript language does not give us object mutation guarantees." 原因在Angular Change Detection Explained by thoughtram也介绍过了。即使@Input()对象的引用没有变,其中的属性可能已经发生变化(JavaScript对象的动态性),...