看個具體的例子，我在Component html里用<ng container *ngTemplateOutlet定義了一個id為greet的template的插入點：

#greet模板的內容：Hello

Angular框架檢測到這個節點后，執行??templat渲染模板：

/*** Creates an LContainer for an ng-template (dynamically-inserted view), e.g.** <ng-template #foo>* <div></div>* </ng-template>** \@codeGenApi* @param {?} index The index of the container in the data array* @param {?} templateFn Inline template* @param {?} decls The number of nodes, local refs, and pipes for this template* @param {?} vars The number of bindings for this template* @param {?=} tagName The name of the container element, if applicable* @param {?=} attrsIndex Index of template attributes in the `consts` array.* @param {?=} localRefsIndex* @param {?=} localRefExtractor A function which extracts local-refs values from the template.* Defaults to the current element associated with the local-ref.** @return {?}*/ function ??template(index, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex, localRefExtractor) {/** @type {?} */const lView = getLView();/** @type {?} */const tView = getTView();/** @type {?} */const adjustedIndex = index + HEADER_OFFSET;/** @type {?} */const tNode = tView.firstCreatePass ?templateFirstCreatePass(index, tView, lView, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex) :(/** @type {?} */ (tView.data[adjustedIndex]));setPreviousOrParentTNode(tNode, false);/** @type {?} */const comment = lView[RENDERER].createComment(ngDevMode ? 'container' : '');appendChild(tView, lView, comment, tNode);attachPatchData(comment, lView);addToViewTree(lView, lView[adjustedIndex] = createLContainer(comment, lView, comment, tNode));if (isDirectiveHost(tNode)) {createDirectivesInstances(tView, lView, tNode);}if (localRefsIndex != null) {saveResolvedLocalsInData(lView, tNode, localRefExtractor);} }

從注釋看，專門為dynamically inserted view準備的。

為ng-container生成實例：

在NgTemplateOutlet class注釋里，詳細記錄了其用法：

/*** @fileoverview added by tsickle* Generated from: packages/common/src/directives/ng_template_outlet.ts* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc*/ /*** \@ngModule CommonModule** \@description** Inserts an embedded view from a prepared `TemplateRef`.** You can attach a context object to the `EmbeddedViewRef` by setting `[ngTemplateOutletContext]`.* `[ngTemplateOutletContext]` should be an object, the object's keys will be available for binding* by the local template `let` declarations.** \@usageNotes* ```* <ng-container *ngTemplateOutlet="templateRefExp; context: contextExp"></ng-container>* ```** Using the key `$implicit` in the context object will set its value as default.** ### Example** {\@example common/ngTemplateOutlet/ts/module.ts region='NgTemplateOutlet'}** \@publicApi*/ class NgTemplateOutlet {/*** @param {?} _viewContainerRef*/constructor(_viewContainerRef) {this._viewContainerRef = _viewContainerRef;this._viewRef = null;/*** A context object to attach to the {\@link EmbeddedViewRef}. This should be an* object, the object's keys will be available for binding by the local template `let`* declarations.* Using the key `$implicit` in the context object will set its value as default.*/this.ngTemplateOutletContext = null;/*** A string defining the template reference and optionally the context object for the template.*/this.ngTemplateOutlet = null;}

最后的運行時效果:

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的Angular 指令ngTemplateOutlet的运行原理单步调试的全部內容，希望文章能夠幫你解決所遇到的問題。

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