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

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

image.pngimage.pngimage.pngimage.png

再单步执行,进入函数ɵɵ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);

}

image.pngimage.pngimage.pngimage.pngimage.pngimage.pngimage.pngimage.pngimage.png

/**

* @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;

}

image.pngimage.png

目录
相关文章
|
2月前
|
Web App开发 UED 开发者
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
|
2月前
|
Web App开发 前端开发 JavaScript
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
|
2月前
|
JavaScript 前端开发 编译器
Angular 中的结构指令运行时的工作原理
Angular 中的结构指令运行时的工作原理
|
2月前
|
编译器 API 开发者
Angular Component ɵcmp 属性的含义和使用场合介绍
Angular Component ɵcmp 属性的含义和使用场合介绍
|
2月前
|
API 开发者
Angular Component class ɵfac 的属性介绍
Angular Component class ɵfac 的属性介绍
|
2月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
|
2月前
|
JavaScript
Angular Component 内 set 关键字的使用
Angular Component 内 set 关键字的使用
|
2月前
|
JavaScript 前端开发 API
vue的双向绑定的原理,和angular的对比
vue的双向绑定的原理,和angular的对比
78 0
|
2月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
|
2月前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
41 0