Angular refreshView里Component template函数的执行原理

在refreshView里执行template function：

执行template：

template function如图：

单步执行到[cxFocus]时：

再单步执行，进入函数ɵɵpureFunction0：

/*** @license* Copyright Google LLC All Rights Reserved.** Use of this source code is governed by an MIT-style license that can be* found in the LICENSE file at https://angular.io/license*/
/*** Bindings for pure functions are stored after regular bindings.** |-------decls------|---------vars---------|                 |----- hostVars (dir1) ------|* ------------------------------------------------------------------------------------------* | nodes/refs/pipes | bindings | fn slots  | injector | dir1 | host bindings | host slots |* ------------------------------------------------------------------------------------------*                    ^                      ^*      TView.bindingStartIndex      TView.expandoStartIndex** Pure function instructions are given an offset from the binding root. Adding the offset to the* binding root gives the first index where the bindings are stored. In component views, the binding* root is the bindingStartIndex. In host bindings, the binding root is the expandoStartIndex +* any directive instances + any hostVars in directives evaluated before it.** See VIEW_DATA.md for more information about host binding resolution.*/
/*** If the value hasn't been saved, calls the pure function to store and return the* value. If it has been saved, returns the saved value.** @param slotOffset the offset from binding root to the reserved slot* @param pureFn Function that returns a value* @param thisArg Optional calling context of pureFn* @returns value** @codeGenApi*/
function ɵɵpureFunction0(slotOffset, pureFn, thisArg) {const bindingIndex = getBindingRoot() + slotOffset;const lView = getLView();return lView[bindingIndex] === NO_CHANGE ?updateBinding(lView, bindingIndex, thisArg ? pureFn.call(thisArg) : pureFn()) :getBinding(lView, bindingIndex);
}

如果binding没有变化，就updateBinding，否则执行getBinding：

执行pureFn：

？？：

成功将[cxFocus]绑定的值提取出来了：

index为22即将被填充：

再次看下Logic view的内部结构：

感觉该Component的所有属性都包含在LView里了：

紧接着执行 ɵɵproperty函数：

/*** @license* Copyright Google LLC All Rights Reserved.** Use of this source code is governed by an MIT-style license that can be* found in the LICENSE file at https://angular.io/license*/
/*** Update a property on a selected element.** Operates on the element selected by index via the {@link select} instruction.** If the property name also exists as an input property on one of the element's directives,* the component property will be set instead of the element property. This check must* be conducted at runtime so child components that add new `@Inputs` don't have to be re-compiled** @param propName Name of property. Because it is going to DOM, this is not subject to*        renaming as part of minification.* @param value New value to write.* @param sanitizer An optional function used to sanitize the value.* @returns This function returns itself so that it may be chained* (e.g. `property('name', ctx.name)('title', ctx.title)`)** @codeGenApi*/
function ɵɵproperty(propName, value, sanitizer) {const lView = getLView();const bindingIndex = nextBindingIndex();if (bindingUpdated(lView, bindingIndex, value)) {const tView = getTView();const tNode = getSelectedTNode();elementPropertyInternal(tView, tNode, lView, propName, value, lView[RENDERER], sanitizer, false);ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, bindingIndex);}return ɵɵproperty;
}

执行完毕：

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

Angular refreshView里Component template函数的执行原理相关推荐

Angular应用里的Template Reference变量
Angular应用里的Template Reference Variable,模板引用变量,用于创建一个对模板里DOM元素或者Angular指令的引用. 使用#号定义一个模板引用变量. 看个具体的例子 ...
Angular Component template函数执行上下文的对象
下图第1行代码,定义的model变量,在Chrome调试器里的名称不是model,而是model_r1:
如何在Component template函数执行时查看ɵɵtemplate或者ɵɵproperty传入的参数值
在观察template执行的时候,如下图所示:展开ng-template时: 会触发函数ɵɵproperty的执行: /*** @license* Copyright Google LLC All R ...
Angular jasmine单元测试框架TestBed.inject的执行原理
单步调试这段代码: TestBed用于单元测试代码里创建Component和service实例. injectionToken即传入TestBed.inject的function: 还是delegat ...
Angular应用里setTimeout被如何被monkey patched的
monkey patched: monkey patch指的是在运行时动态替换,一般是在startup的时候. 下面的测试代码可以让我们弄清楚,浏览器支持的原生函数setTimeout,是如何在Ang ...
java 动态字符串_Java动态编译执行一串字符串,类似于Javascript里的eval函数
Javascript里的eval函数能动态执行一串js脚本. 那Java里怎么做到呢. 有两种方法: 一种是使用可以执行js脚本的Java类 ScriptEngineManagerpublic sta ...
javascript里将函数名字符串转为函数并执行
javascript中,如何将函数名字符串转变为函数并执行? "用 eval ",西蒙说. 咋弄呢?类似地: var mess = "hello world!" ...
Angular单元测试里pipe的mock设计
我想对下列这个Component的UI进行单元测试.其中有一个自定义的cxUrl pipe,在单元测试时,我需要对其进行Mock: 解决方法,在单元测试的实现代码里,创建一个用@Pipe修饰过的Moc ...
Angular 项目里 angular.json 文件内容的学习笔记
看一个基于 Angular 的 SAP Spartacus 项目里 angular.json 的例子: version: The configuration-file version. newProj ...

Angular refreshView里Component template函数的执行原理

Angular refreshView里Component template函数的执行原理相关推荐

最新文章

热门文章