Angular 指令ngTemplateOutlet的运行原理单步调试
时间:2022-07-26
本文章向大家介绍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;
}
最后的运行时效果:
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浅谈Android轻量级的数据缓存框架RxCache
- Android开发实现消除屏幕锁的方法
- Android中js和原生交互的示例代码
- 浅谈android获取设备唯一标识完美解决方案
- Android开发实现长按返回键弹出关机框功能
- Android View 完美实现EditText 在软键盘上边的示例
- Android蓝牙通信之搜索蓝牙设备
- Android listview定位到上次显示的位置的实现方法
- Android开发实现生成excel的方法详解
- Android ToolBar 修改边距的实现方法
- Android 自定义view实现TopBar效果
- Android 客户端RSA加密的实现方法
- Android圆形头像拍照后“无法加载此图片”的问题解决方法(适配Android7.0)
- Android 中Failed to read key from keystore解决办法
- Android圆角按钮的制作方法