ng-template 不只能访问本身的 Template Context,它还可以访问到它的 Declaration Template Context (而且是所有组件层的 Declaration Template Context)。 Declaration 指的是 ng-template 被声明的地方。 比如上图,这个 ng-template 是在 App Template 被声明的,所以它的 Declaration 指的就是 App Template。 App Te...
ngTemplateOutlet是定义模板引用和模板的上下文(即ng-template)对象的字符串,这样如果有多个模板引用可以用这种方式 ngTemplateOutletContext是附加到的上下文(即ng-template)对象EmbeddedViewRef。这应该是一个对象,该对象的键可用于本地模板let 声明的绑定。$implicit在上下文(即ng-template)对象中使用键会将其值设置为...
可以通过设置ngTemplateOutletContext来给EmbeddedViewRef附加一个上下文对象,ngTemplateOutletContext是一个对象,该对象中的key可以在模板中使用let语句进行绑定。 ngTemplateOutlet可以绑定到任何元素上。 <ng-container *ngTemplateOutlet="myTpl;context:{title:'儿歌'}"></ng-container><ng-template#myTpllet-title=...
使用字符串引用ng-template的方法是通过ngTemplateOutlet指令来实现。ng-template是Angular中的一个内置指令,用于定义可重用的模板。 首先,在组件的模板中定义一个ng-template,并为其指定一个唯一的标识符,例如: 代码语言:txt 复制 <ng-template #myTemplate> This is a template. </ng-template> 然后,在需要...
1.ng-template指令介绍--<ng-template></ng-template> ng-template表示一个模板,标签内是模板的内容,模板的内容可以与其它模板一起组成组件模板。 在Angular中,我们用过的许多结构指令都使用了ng-template,如ngIf、ngFor和ngSwitch。 ngTemplate中的内容可以自定义,并且一开始不会被渲染,除非满足一定的条件。我们必...
ng-switch。 这些结构指令被用来通过有条件地渲染HTML元素来改变DOM的结构。 ng-container和ng-template都是在隐藏自己的同时渲染被包裹的元素,但它们都遵循不同的机制,这些区别将在下面的文章中展示。 ng-template:让我们试试一个例子。 import{Component}from'@angular/core';@Component({selector:'app-root',te...
如果没有使用结构型指令,而仅仅把一些别的元素包装进 ng-template 中,那些元素就是不可见的。 像*ngFor、 *ngIf这些指令Angular内部会把这些属性翻译成一个 元素 并用它来包裹宿主元素。 ng-container指令简介 为了避免创建额外的div,我们可以改用ng-container,它是一个分组元素,但它不会污染样式或元素布局,因为...
顾名思义,<ng-template>是一个模板元素,用于Angular与结构指令结合使用(*ngIf,*ngFor,[ngSwitch]和自定义指令) 这些模板元素仅工作在结构指令存在的时候。Angular包装了我们应用指令的元素。 考虑下边的一个*ngIf的例子。 【我们可以看到,在一个普通元素上添加结构指令,angular在解析时候,其实会帮我买创建一个ng...
解析以后:ngIf变成属性型指令,并被绑定到ng-template上面,同时ngIf的宿主元素被ng-template包裹。 <ng-template[ngIf]="hero">{{hero.name}}</ng-template> 2:使用 写了一个简单的结构指令,类似于ngIf {{txt}}({{name}})啦啦啦,我是卖报小行家//ts部分: showTpl = true; tpl.directive.ts import{...
<ng-template>模板元素与html5的template元素一样,需要被特殊处理后才能渲染。ng主要是通过类TemplateRef和ViewContainerRef实现的。 通过阅读ngIf源码学习如何运用<ng-template> 在使用ngIf指令时我们并未发现ng-template的身影,这是因为"*"(星号)语法糖的原因,这个简写方法是一个微语法,而不是通常的模板表达式, An...