angular的组件插槽
angular组件插槽用法
·
angular中我们经常会遇见多复用的组件,但是这些组件上有一些又需要有一定程度上的自定义的样式,逻辑,相对与vue的solt,angular提供了ng-content。
用法:
默认用法: <ng-content ></ng-content>
name指定: <ng-content select="[name='123']"></ng-content>
class指定: <ng-content select=".selecter"></ng-content>
父元素调用时候:
class指定的会直接找到相关class
<div gas-table>
<tr class="selecter">
<th nzWidth="100px" nzShowCheckbox [(nzChecked)]="isAllDisplayDataChecked" (nzCheckedChange)="checkAll($event)">
</th>
<th nzWidth="100px" nzEllipsis>123123123</th>
</tr>
</div>
name指定:
<tr name="123"></tr>
默认用法><app-table> 12131<app-table>
需要注意的是样式最好写在最高层,否则可能会在编译时候与父元素相关的子元素样式会丢失
更多推荐
所有评论(0)