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

我有一个自定义指令*appUnless, 在第48行使用，这个<p>前面是第39行的<p>，后面是第52行的<p>:

观察运行时构造函数传入的elementRef:

发现其前面的节点确实为p：

且该p的4个子节点如下：

且text，span，text和button子节点依次显示如下：

给当前的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：

property的值为false：

这个74，代表appUnless在TView里的索引为74：

给指令的实例属性赋值时，就会调用属性的setter方法：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

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

Angular 自定义 structural 指令的一个例子
The <ng-container> is a syntax element recognized by the Angular parser. It's not a directive, ...
视频AI智能分析流媒体服务器EasyAIFilter代码自定义视频AI智能分析过程的使用方法
背景分析从视频智能化相关技术研发开始计算,智能化在视频行业内已经发展了十余年,但是视频行业的智能化应用一直没有达到预期.目前视频智能化主要的表现还是集中在前端设备摄像机产品的某些智能功能,以及一些配 ...
Angular structural指令host element的定位调试
我实现了一个自定义structural指令,施加的host Element是<p>: 运行时,Angular解析到模板里这一行: 调用函数ɵɵtemplate,给创建一个LContaine ...
Python中的对象实例化过程用python解密__new__
在本文中,您将学习: 什么是python中的对象 Python中的对象实例化过程该__new__方法该__call__方法可在python中调用 Python是一种面向对象的编程语言.pytho ...
浅谈Angular如何自定义创建指令@Directive
知识普及 Angular 指令根据其创建形式分为内置指令和自定义指令,指令按照类型分: 模板指令--组件就是模板指令(只能自定义) 属性型指令 -- 更改元素.组件或其他指令的外观或行为的指令(有内 ...
Angular单元测试ComponentFixture的实例化过程明细
从angular core里导入单元测试需要的库文件: import { async, ComponentFixture, TestBed } from '@angular/core/testing' ...
Angular 4.x 自定义验证指令
表单是几乎每个 Web 应用程序的一部分.虽然 Angular 为我们提供了几个内置 validators (验证器),但在实际工作中为了满足项目需求,我们经常需要为应用添加一些自定义验证功能.接下来 ...
ANGULAR自带指令有哪些？
1.背景介绍 AngularJS 通过被称为指令的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令. 2.知识剖析 angula ...
从JVM看类的加载过程与对象实例化过程
一. 类的加载过程 1. 类的加载过程大致是个什么过程? 我们编写产生.java文件,这些.java文件经过Java编译器编译成拓展名为.class的文件,.class文件中保存着Java代码经转换后 ...

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

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

最新文章

热门文章