1、<ng-template>
ng-template用来定义模板,仅在存在结构指令的情况下起作用,可以和*ngIf-else配合使用
1)IF-ELSE
<div *ngIf="isValid; else otherTpl">
这是IF内容
</div>
<ng-template #otherTpl>这是ELSE内容</ng-template>
#otherTpl是模板引用变量,当isValid为false时,页面渲染else内容
2)IF-THEN-ELSE
<div *ngIf="isValid; then a1 else a2">这里的内容会被忽略</div>
<ng-template #a1>这是THEN内容</ng-template>
<ng-template #a2>这是ELSE内容</ng-template>
2、<ng-container>
因为Angular V2不支持同一元素上使用多个结构指令,所以多用ng-container。它可以用来组织标签,包裹标签,用于对节点分组,但不破坏DOM结构,不添加额外的标签。
<ng-container *ngIf="flag">
<div *ngFor="let item of list">
// 渲染item内容
</div>
</ng-container>
3、<ng-content>组件内容投影
当我们想封装一个组件,并且希望组件展示的内容是用户自定义的,可以用ng-content
举个例子,比如我们想封装一个alert提示框,做成可复用的组件
1)直接封装成MyAlert组件时,标题、内容和底部按钮都写si了,无法自定义
2)全部投影(默认插槽)
在section中自定义内容,就会把<my-alert>标签里的内容放到组件中section里显示
3)选择性投影(具名插槽)
ng-content也可以有选择性的挑选包裹的内容,我们在myalert组件中添加了三个ng-content,并且添加了select属性,它可以根据【标签名或class名等CSS选择器】进行投影,当ng-content没有指定select时,会显示剩余内容。
4)ngProjectAs
实例3中,有个限制是select定义的选择器必须要作为组件标签的直接子节点,否则不生效。
比如,如果我们在使用<my-alert>时又包裹一层,则无法显示这个投影内容。(但是不影响其他投影)
为了解决这个问题,需要使用ngProjectAs,,它可以应用于任何元素上。
4、*ngTemplateOutlet
用作模板容器,方便我们在多个地方重复使用。
1)模板复用,例如我们定义了一个logoTpl的模板需要在项目中多次使用,则可以使用*ngTemplateOutlet
<!-- 使用模板 -->
<ng-container *ngTemplateOutlet="logoTpl"></ng-container>
<!-- 定义模板 -->
<ng-template #logoTpl>
...
</ng-tenplate>
2)组件定制
<!-- 使用模板 -->
<ng-container *ngTemplateOutlet="a1?a1:a2"></ng-container>
<!-- 定义a1和a2模板 -->
<ng-template #a1>XXX</ng-tenplate>
<ng-template #a2>XXX</ng-tenplate>
3)区别
- ng-content按照原样呈现,必须显示从父级接受的内容。借助select属性,可拆分内容。将内容呈现在视图的不容位置。
- *ngTemplateOutlet可进行条件渲染。