Angular自定义structural指令的实例化过程以及set方法的调用

简介: Angular自定义structural指令的实例化过程以及set方法的调用

我有一个自定义指令*appUnless, 在第48行使用,这个

前面是第39行的

,后面是第52行的

:image.png观察运行时构造函数传入的elementRef:image.pngimage.pngimage.pngimage.png给当前的element设置property值:/**

* @fileoverview added by tsickle

* Generated from: packages/core/src/render3/instructions/property.ts

* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc

*/

/**

* 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

*

* \@codeGenApi

* @template T

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

* @return {?} This function returns itself so that it may be chained

* (e.g. `property('name', ctx.name)('title', ctx.title)`)

*

*/

function ɵɵproperty(propName, value, sanitizer) {

   /** @type {?} */

   const lView = getLView();

   /** @type {?} */

   const bindingIndex = nextBindingIndex();

   if (bindingUpdated(lView, bindingIndex, value)) {

       /** @type {?} */

       const tView = getTView();

       /** @type {?} */

       const tNode = getSelectedTNode();

       elementPropertyInternal(tView, tNode, lView, propName, value, lView[RENDERER], sanitizer, false);

       ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, bindingIndex);

   }

   return ɵɵproperty;

}

/**property name为指令的名称appUnless:image.pngproperty的值为false:image.png这个74,代表appUnless在TView里的索引为74:

image.pngimage.pngimage.png给指令的实例属性赋值时,就会调用属性的setter方法:image.pngimage.png


相关文章
|
2月前
|
JavaScript 索引
在使用`Vue.$set`方法时,需要注意哪些事项?
在使用`Vue.$set`方法时,需要注意哪些事项?
13 0
|
2月前
|
存储 C++ 容器
set容器一自定义数据类型指定排序规则讲解
set容器一自定义数据类型指定排序规则讲解
21 1
|
2月前
|
JavaScript
Vue.js 实用技巧:深入理解 Vue.set 方法
Vue.js 实用技巧:深入理解 Vue.set 方法
|
3月前
|
存储 Java
java set集合相关介绍和方法使用操作
java set集合相关介绍和方法使用操作
29 2
|
4月前
|
JavaScript 索引
Vue.set 方法原理
Vue.set 方法原理
12 0
|
4月前
|
人工智能 JavaScript 前端开发
让OpenAi给我写个JS的set对象的笔记和快速去重方法
让OpenAi给我写个JS的set对象的笔记和快速去重方法
21 0
|
4月前
|
C++
c++ set、map的四种自定义排序方法
c++ set、map的四种自定义排序方法
85 0
|
5月前
|
应用服务中间件 nginx
百度搜索:蓝易云【Nginx【Nginx核心指令(rewrite指令、实战rewrite 、if指令、set和break指令】】
这些核心指令在Nginx的配置文件中发挥重要作用。使用rewrite指令可以实现URL的重写和重定向,if指令可以根据条件执行不同的操作,set指令可以创建自定义变量并设置其值,而break指令可以中断请求处理流程。理解和灵活运用这些指令,可以帮助我们更好地配置和管理Nginx服务器。
68 1
|
5月前
|
Java 数据库
mybatis-plus允许自定义handlerType的set
mybatis-plus允许自定义handlerType的set
37 0
|
6月前
IDEA 自动生成set方法(GenerateAllSetter插件)
IDEA 自动生成set方法(GenerateAllSetter插件)
544 0

热门文章

最新文章