Angular structural指令host element的定位调试
2023-09-14 09:04:03 时间
我实现了一个自定义structural指令,施加的host Element是<p>:
运行时,Angular解析到模板里这一行:
调用函数ɵɵtemplate,给创建一个LContainer:
/**
* 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);
}
}
host element p:
Angular调用指令的工厂函数生成新的实例,
自定义指令的属性和构造函数在指令工厂里被调用:
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
相关文章
- [Angular] Change component default template (ng-content, ng-template, ngTemplateOutlet, TemplateRef)
- [Angular 2] Refactoring mutations to enforce immutable data in Angular 2
- [Angular 2] The form export from NgFormControl
- [Angular] Make a chatbot with DialogFlow
- [Angular] Create a custom validator for reactive forms in Angular
- [AngularJS] Angular 1.3 ng-model-options - getterSetter
- SAP Spartacus B2B user列表对应的Angular Component
- Angular NgModule里定义的注解和NgModuleRef$1运行时
- Angular应用里input字段后面的_ngcontent-hqi是什么含义
- Angular 14 新的 inject 函数介绍
- Angular HTTP 请求自定义 timeout 值的一种实现思路
- 如何运行 Angular library 的原理图 Schematics
- Angular 如何自定义 pipe 管道以及参数传递问题
- Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记
- Angular应用Base Element Href属性的设置