更新时间:2022-09-12 14:50:13
#greet模板的内容:Hello
Angular框架检测到这个节点后,执行ɵɵtemplat渲染模板:
/**
* 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生成实例:在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
* ```
*
* ```
*
* 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;
最后的运行时效果:
}