Component template文件源代碼：

<button [disabled]="isDisabled" >Click me</button>

Component實現：

export class AppComponent implements OnInit {counter = 0;get isDisabled(){console.log('Jerry: ' + this.counter++);return true;} }

Component里維護了一個計數器：counter

運行時的輸出：

下面是分別研究這四次get調用的上下文。

第一次觸發

通過_loadComponent觸發：

第二次觸發

同第一次觸發一樣，同樣是在tick方法里，只不過第一次觸發在tick的view.detectChanges里，而第二次觸發，在view.checkNoChanges里：

/*** Invoke this method to explicitly process change detection and its side-effects.** In development mode, `tick()` also performs a second change detection cycle to ensure that no* further changes are detected. If additional changes are picked up during this second cycle,* bindings in the app have side-effects that cannot be resolved in a single change detection* pass.* In this case, Angular throws an error, since an Angular application can only have one change* detection pass during which all change detection must complete.* @return {?}*/

第三次觸發

class ApplicationRef {/*** \@internal* @param {?} _zone* @param {?} _console* @param {?} _injector* @param {?} _exceptionHandler* @param {?} _componentFactoryResolver* @param {?} _initStatus*/constructor(_zone, _console, _injector, _exceptionHandler, _componentFactoryResolver, _initStatus) {this._zone = _zone;this._console = _console;this._injector = _injector;this._exceptionHandler = _exceptionHandler;this._componentFactoryResolver = _componentFactoryResolver;this._initStatus = _initStatus;/*** \@internal*/this._bootstrapListeners = [];this._views = [];this._runningTick = false;this._enforceNoNewChanges = false;this._stable = true;/*** Get a list of component types registered to this application.* This list is populated even before the component is created.*/this.componentTypes = [];/*** Get a list of components registered to this application.*/this.components = [];this._enforceNoNewChanges = isDevMode();this._zone.onMicrotaskEmpty.subscribe({next: (/*** @return {?}*/() => {this._zone.run((/*** @return {?}*/() => {this.tick();}));})});

第四次也是最后一次觸發

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Angular property binding重复触发的问题讨论的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。