Angular 指令ngTemplateOutlet的运行原理单步调试

看个具体的例子，我在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的运行原理单步调试相关推荐

Angular依赖注入的一个例子和注入原理单步调试
定义一个抽象服务类: export abstract class GreetingService {abstract greet(name: string): string;} 定义一个具体类实现该抽 ...
日志库 winston 的学习笔记 - logger.info 的实现原理单步调试
按照这篇文章日志库 winston 的学习笔记 - 创建一个使用 winston 的 Node.js 应用里的代码,对下列方法进行单步调试: 因为我们调用的是 info 方法,所以生成的日志,leve ...
通过运行时单步调试弄清楚[(ngModel)]的双向绑定的工作原理
Component HTML: <input type="text" maxlength="40" nz-input placeholder=" ...
SAP Cloud for Customer(C4C) HTML mashup的运行时单步调试
2018-03-22 6:17PM - yongda
matlab2013单步运行,matlab如何单步调试
(5)断点设置.断点为 MATLAB 程序执行时人为设置的中断点,程序运行至断点... 在MATLAB下,利用File菜单中的Open或 New命令,打开已建的M文件或新建M文件,这时在MATLAB ...
linux下gdb单步调试
用 GDB调试程序 GDB 概述 ---- GDB 是 GNU开源组织发布的一个强大的 UNIX下的程序调试工具.或许,各位比较喜欢那种图形界面方式的,像 VC. BCB等 IDE的调试,但如果你是在 ...
VS单步调试UE4打包的exe游戏
运行后单步调试游戏 1. 打包windows平台游戏.为了方便调试,最好选择选择Debug版本,禁止代码优化. 2. 直接运行游戏,接着打开任务管理器,选择正在运行游戏的游戏,并选择调试. 3. 选择 ...
Angular 基于自定义指令的内容投影 content projection 问题的单步调试
问题描述本文涉及到的代码位置:https://github.com/wangzixi-diablo/ngDynamic 我有一个能接受内容投影的 Angular Component: 具体投影内容, ...
关于 Angular view Query 的 id 选择器问题的单步调试
问题描述我有这样一个 Angular Component,模板文件如下: @Component({ selector: 'example-app', template: ` <pane id= ...

Angular 指令ngTemplateOutlet的运行原理单步调试

Angular 指令ngTemplateOutlet的运行原理单步调试相关推荐

最新文章

热门文章