我有一个自定义指令*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的原创文章，请关注公众号"汪子熙":