ng-template和ngTemplateOutlet

我们可以使用ng-container, ng-template和ngTemplateOutlet 三者的配合，实现动态渲染某个模板视图的目的。

ng build之后，在Chrome开发者工具里看到ng文件夹下对应的html文件：

<ng-template #inputTemplate><input><h1>ngTemplateOutlet的用法</h1>
</ng-template><ng-container *ngTemplateOutlet="inputTemplate"></ng-container>

tNode指向源代码里的ng-container节点：

ngTemplateOutlet的实现：

/*** @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*/
@Directive({selector: '[ngTemplateOutlet]'})
export class NgTemplateOutlet implements OnChanges {private _viewRef: EmbeddedViewRef<any>|null = 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.*/@Input() public ngTemplateOutletContext: Object|null = null;/*** A string defining the template reference and optionally the context object for the template.*/@Input() public ngTemplateOutlet: TemplateRef<any>|null = null;constructor(private _viewContainerRef: ViewContainerRef) {}ngOnChanges(changes: SimpleChanges) {const recreateView = this._shouldRecreateView(changes);if (recreateView) {const viewContainerRef = this._viewContainerRef;if (this._viewRef) {viewContainerRef.remove(viewContainerRef.indexOf(this._viewRef));}this._viewRef = this.ngTemplateOutlet ?viewContainerRef.createEmbeddedView(this.ngTemplateOutlet, this.ngTemplateOutletContext) :null;} else if (this._viewRef && this.ngTemplateOutletContext) {this._updateExistingContext(this.ngTemplateOutletContext);}}

还是老套路，在ngOnChanges里调用ViewContainerRef.createEmbeddedView:

更多Jerry的原创文章，尽在：“汪子熙”:

ng-template和ngTemplateOutlet相关推荐

cannot bind to cxOutlet since it is not a known property of ng template
我在SAP Spartacus处于运行状态(即ng serve)始终处于运行状态时,进行代码热修改,经常遇到此类错误消息退出ng serve,重新执行即可: 更多Jerry的原创文章,尽在:&quo ...
Angular 指令ngTemplateOutlet的运行原理单步调试
看个具体的例子,我在Component html里用<ng container *ngTemplateOutlet定义了一个id为greet的template的插入点: #greet模板的内容: ...
Angular NgTemplateOutlet的一个例子
NgTemplateOutlet:Inserts an embedded view from a prepared TemplateRef. 语法: <ng-container *ngTempl ...
【Angular 基础入门】——知识点整合
文章目录快速入门一.Angular 环境搭建二.基本概念模块简介组件简介服务与依赖注入路由三.基础教程使用路由自定义组件常用结构型指令事件绑定模板引用模板表达式中的运算符 ...
ngzorro html源码,Angular 中 ngTemplateOutlet 的用法以及ng-zorro源码分析！
一.引言今天看到文章:https://segmentfault.com/a/1190000015944548 .于是专门研究一下ngTemplateOutlet用法!!!! 官方定义 : NgTem ...
ng-template、ng-container、ng-content和ngTemplateOutlet、ngProjectAs傻傻分不清！他们究竟是干啥的？？？
一句话描述5个关键词的作用: ng-template是备胎(模板):通常在html里面作为备用模板,当绑定了对应的#标记的时候才会显示 ng-container是舔狗(虚拟标签):包裹的内容显示,而自 ...
您需要了解有关Angular中的ng-template，ng-content，ng-container和* ngTemplateOutlet的所有信息...
It was one of those days when I was busy working on new features for my office project. All a sudden ...
必须正确理解的---ng指令中的compile与link函数解析
这个绝对是深入的知识,但看完之后,对NG的理解就很利害啦. http://www.ifeenan.com/angularjs/2014-09-04-%5B%E8%AF%91%5DNG%E6%8C%87 ...
关于施加在 div 标签上的 ngTemplateOutlet 指令让 div class 丢失的问题调试
本文描述的应用代码地址:https://github.com/wangzixi-diablo/ngDynamic 问题描述我在 div 标签页里使用 ngTemplateOutlet 给代码第 11 ...

ng-template和ngTemplateOutlet

ng-template和ngTemplateOutlet相关推荐

最新文章

热门文章