源代码：

<h1>ng-template</h1>
<br><!-- 通过ngIf结构型指令显示ng-template的内容 -->
<div class="lessons-list" *ngIf="!condition else elseTemplate"><h3>标题:判断条件为真</h3>
</div>
<ng-template #elseTemplate><div>判断条件为假</div>
</ng-template>
<br>

运行时，准备渲染 id 为 elseTemplate 的模板：

TemplateRef有个方法：createEmbeddedView

兄弟comment节点：

TemplateRef对应ng-template的引用。

看一个实际的例子：

template 文件里，定义一个id为tpl的ng-template:

<ng-template #tpl><div>Hello, ng-template!</div>
</ng-template>

在宿主文件里：

import {AfterViewInit, Component, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';@Component({selector: 'app-ng-template',templateUrl: './ng-template.component.html'
})
export class NgTemplateComponent implements AfterViewInit {condition = true;@ViewChild('tpl')tplRef: TemplateRef<any>;myContext = {$implicit: '默认值', name: 'tuacy'};constructor(private vcRef: ViewContainerRef) {}ngAfterViewInit(): void {this.vcRef.createEmbeddedView(this.tplRef);}}

首先使用依赖注入，拿到ViewContainerRef引用。
使用@ViewChild, 拿到id为tpl的ng-template引用，类型为TemplateRef.
调用ViewContainerReference, 创建tpl模板实例。

注意，this.vcRef.createEmbeddedView, 虽然传入的是templateRef，但实际上正是调用templateRef的createEmbeddedView方法。

创建完view后立即渲染：

2021-4-20

Represents an embedded template that can be used to instantiate embedded views.

TemplateRef代表一个嵌入的模板，可以被用来实例化嵌入视图。

abstract class TemplateRef<C> {abstract elementRef: ElementRefabstract createEmbeddedView(context: C): EmbeddedViewRef<C>
}

elementRef：The anchor element in the parent view for this embedded view.

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

ng-template 和 TemplateRef.createEmbeddedView相关推荐

templateRef.createEmbeddedView is not a function
背景:在使用Swper封装一个组件时,碰到这样一种常见,使用*ngIf判断数据类型,如果为数组就去循环dom,如果不是就直接使用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 ...
flask框架视图和路由_角度视图，路由和NgModule的解释
flask框架视图和路由 Angular vs AngularJS (Angular vs AngularJS) AngularJS (versions 1.x) is a JavaScript-ba ...
关于 ng-template 通过 @input 传入另一个 Component 不能工作的问题调试
问题描述本文设计到的代码仓库:https://github.com/wangzixi-diablo/ngDynamic host Component: <ng-template #paramT ...
关于施加在 div 标签上的 ngTemplateOutlet 指令让 div class 丢失的问题调试
本文描述的应用代码地址:https://github.com/wangzixi-diablo/ngDynamic 问题描述我在 div 标签页里使用 ngTemplateOutlet 给代码第 11 ...
templateref html内容,angular之ng-template模板加载
angular之ng-template模板加载 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了angular之ng-template模板加 ...
NG Ng-template（模板元素）
ng-template <ng-template>是一个 Angular 元素,它永远不会直接显示出来. 在渲染视图之前,Angular 会把<ng-template>及其内容 ...
templateref html内容,angular4中的ElemenetRef和TemplateRef之间的区别
我见过很多ElemenetRef和TemplateRef的例子让我更加困惑. > ElementRef和TemplateRef之间的区别是什么我们应该使用另一个 this is my eleme ...
手写ngIf，使用视图容器引用ViewContainerRef和模板引用TemplateRef
写这篇博客的原有:虽然Angular官网有提到指令的使用,以及相关Ref的使用,但是对相关Ref并没有做出详细的解释,也没有提供相关的详细文档. 明确 *ngIf 是一个结构型指令,需要 @Direc ...

ng-template 和 TemplateRef.createEmbeddedView

2021-4-20

ng-template 和 TemplateRef.createEmbeddedView相关推荐

最新文章

热门文章