angular7——ng-template、ng-content、ng-container
一、ng-contentng-content是内容映射指令(也叫内容嵌入),相当于vue中的slot内容分发,内容映射指的是在组件中嵌入模板代码,方便定制可复用的组件,很好地扩充组件的功能,方便代码的复用。使用方法:https://blog.csdn.net/yw00yw/article/details/90175624ng-content相当于一个占位符(留了个位置),类似于路由出口ro...
一、ng-content
ng-content是内容映射指令(也叫内容嵌入),相当于vue中的slot内容分发,内容映射指的是在组件中嵌入模板代码,方便定制可复用的组件,很好地扩充组件的功能,方便代码的复用。
使用方法:https://blog.csdn.net/yw00yw/article/details/90175624
ng-content相当于一个占位符(留了个位置),类似于路由出口router-outlet一样。之后会把相应的内容放到这个位置上来。
二、ng-template
ng-template是Angular 结构型指令中的一种,用于定义模板渲染HTML(模板加载)。定义的模板不会直接显示出来,需要通过其他结构型指令(如 ng-if)或 template-ref 将模块内容渲染到页面中。
- 借助其他结构型指令如×ngIf,来显示ng-template的内容
<div *ngIf="arr.length > 0 else xxxx">控制ng-template是否显示和隐藏</div>
<ng-template #xxxx>
ng-template中的内容显示和隐藏,通过结构性指令*ngif来控制,当ngif为false,这显示
</ng-template>
三、ng-container
ng-container既不是一个Component组件,也不是一个Directive指令,只是单纯的一个特殊tag标签。ng-container可以直接包裹任何元素,包括文本,但本身不会生成元素标签,也不会影响页面样式和布局。包裹的内容,如果不通过其他指令控制,会直接渲染到页面中。
可以把ng-container简单理解为一个逻辑容器。用来做一些逻辑处理的。减少不必要的html标签。
ng-container有一个用处就是配合ngFor和ngIf使用。我们知道ngFor和ngIf不能同时处在同一个元素上。
<ul>
<ng-container *ngFor="let item of arr">
<li *ngIf="item % 2 === 0">
{{item}}
</li>
</ng-container>
</ul>
渲染结果:2、4、6
更多推荐
所有评论(0)