Angular structural指令host element的定位调试

简介: Angular structural指令host element的定位调试

image.pngimage.pngimage.png/**

* Creates an LContainer for an ng-template (dynamically-inserted view), e.g.

*

*

*    

*

*

* \@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);

   }

}image.pngAngular调用指令的工厂函数生成新的实例,

image.png自定义指令的属性和构造函数在指令工厂里被调用:image.png

相关文章
关于 Angular view Query 的 id 选择器问题的单步调试
关于 Angular view Query 的 id 选择器问题的单步调试
|
2月前
|
JavaScript
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
24 0
|
2月前
|
索引
Angular 中的 ngFor 指令
Angular 中的 ngFor 指令
35 0
|
2月前
|
JavaScript
如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener
如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener
29 0
|
5月前
|
JavaScript 前端开发 编译器
Angular 中的结构指令运行时的工作原理
Angular 中的结构指令运行时的工作原理
|
JavaScript
Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试
Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试
|
存储 JavaScript 前端开发
通过单步调试的方式学习 Angular 中 TView 和 LView 的概念
通过单步调试的方式学习 Angular 中 TView 和 LView 的概念
|
前端开发 JavaScript
通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式
通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式
|
20天前
|
缓存 JavaScript 前端开发
Angular 应用打包和部署
Angular 应用打包和部署
55 1
|
2月前
|
应用服务中间件 Java Maven
掌控视图的力量!深入解析 JSF 视图管理,揭秘视图生命周期的秘密,让你的应用更高效!
【8月更文挑战第31天】JavaServer Faces (JSF) 是一种强大的框架,用于管理 Web 应用程序的视图。本文通过具体案例介绍 JSF 视图管理的基础知识,包括创建、管理和销毁视图的过程。首先,在 Eclipse 中创建一个新 JSF 项目,并配置 Maven 依赖。接着,在 `WEB-INF` 目录下配置 `web.xml` 文件,设置 JSF servlet。
37 0
下一篇
无影云桌面