当我们把 ng-template 和 ng-container (插入的位置) 分别放到不同的组件时,结果只有 ng-template declare 的 C1 组件可以 query 到 ng-template 里的内容。 这里就涉及到 Query ng-template 的机制了,我们下面逛源码的时候才解答,这里我们只要记住,没有人可以从 ng-container 里 query 出任何东西。 Dynamic C...
ngTemplateOutletContext是附加到的上下文(即ng-template)对象EmbeddedViewRef。这应该是一个对象,该对象的键可用于本地模板let 声明的绑定。$implicit在上下文(即ng-template)对象中使用键会将其值设置为默认值。 ngTemplateOutlet也可用于外部传进来的模板 child.component.html <ng-template[ngTemplateOutlet]="tplRef...
使用字符串引用ng-template的方法是通过ngTemplateOutlet指令来实现。ng-template是Angular中的一个内置指令,用于定义可重用的模板。 首先,在组件的模板中定义一个ng-template,并为其指定一个唯一的标识符,例如: 代码语言:txt 复制 <ng-template #myTemplate> This is a template. </ng-template> 然后,在需要...
可以通过设置ngTemplateOutletContext来给EmbeddedViewRef附加一个上下文对象,ngTemplateOutletContext是一个对象,该对象中的key可以在模板中使用let语句进行绑定。 ngTemplateOutlet可以绑定到任何元素上。 <ng-container *ngTemplateOutlet="myTpl;context:{title:'儿歌'}"></ng-container><ng-template#myTpllet-title=...
我们常用的结构化指令,如\*ngIf和\*ngFor,其中*是一个语法糖,解开之后会变成ng-template标签 ngIf {{hero.name}} 解析以后:ngIf变成属性型指令,并被绑定到ng-template上面,同时ngIf的宿主元素被ng-template包裹。 <ng-template[ngIf]="hero">{{hero.name}}</ng-template> 2:使用 写了一个简单的结构指...
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,它是一个分组元素,但它不会污染样式或元素布局,因为...
在使用ngIf指令时我们并未发现ng-template的身影,这是因为"*"(星号)语法糖的原因,这个简写方法是一个微语法,而不是通常的模板表达式, Angular会解开这个语法糖,变成一个<ng-template>标记,包裹着宿主元素及其子元素。 {{hero.name}} 会被解析为 <ng-template[ngIf]...
1. < ng-template > 顾名思义,<ng-template>是一个模板元素,用于Angular与结构指令结合使用(*ngIf,*ngFor,[ngSwitch]和自定义指令) 这些模板元素仅工作在结构指令存在的时候。Angular包装了我们应用指令的元素。 考虑下边的一个*ngIf的例子。 【我们可以看到,在一个普通元素上添加结构指令,angular在解析时候,其...