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>
          

需要注意的是样式最好写在最高层,否则可能会在编译时候与父元素相关的子元素样式会丢失

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐