且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-09-12 14:50:13

Angular 指令ngTemplateOutlet的运行原理单步调试#greet模板的内容:Hello

Angular框架检测到这个节点后,执行ɵɵtemplat渲染模板:

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

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

   }

}从注释看,专门为dynamically inserted view准备的。

为ng-container生成实例:Angular 指令ngTemplateOutlet的运行原理单步调试在NgTemplateOutlet class注释里,详细记录了其用法:Angular 指令ngTemplateOutlet的运行原理单步调试/**

* @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

* ```

*

* ```

*

* 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;

最后的运行时效果:

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