我有一個自定義指令*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方法的调用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。