文档首页/ 云消息服务 KooMessage/ 开发指南/ 父组件开发/ 父组件代码示例
更新时间：2023-02-09 GMT+08:00
查看PDF
分享

父组件代码示例

HTML

<div class="previews" [style]=" pages[0].style" > 
// ngFor为循环指令，遍历content数组获取item     
  <div *ngFor="let item of pages[0].content">       
    // ngIf为判断指令，true为显示，false为隐藏       
    // [item]=”item”是将item数据传入对应组件，组件内用item变量接收       
    <app-preview-text *ngIf="item.type === 'text'" [item]="item"></app-preview-text>       
    <app-preview-button *ngIf="item.type === 'button'" [item]="item" ></app-preview-button>       
    <app-preview-image *ngIf="item.type === 'image'" [item]="item"></app-preview-image>       
    <app-preview-video *ngIf="item.type === 'video'" [item]="item"></app-preview-video>       
    <app-preview-sideslip *ngIf="item.type === 'sideslip'" [item]="item"></app-preview-sideslip>       
    <app-preview-swiper *ngIf="item.type === 'swiper'" [item]="item"></app-preview-swiper>       
    <app-preview-ecommerce *ngIf="item.type === 'eCommerce'" [item]="item"></app-preview-ecommerce>       
    <app-preview-card-voucher *ngIf="item.type === 'card-voucher'" [item]="item"></app-preview-card-voucher>       
    <app-preview-card-vouchers *ngIf="item.type === 'card-vouchers'" [item]="item"></app-preview-card-vouchers>     
  </div> 
</div>

CSS

.previews {
  position: relative;
  transform-origin: left top;
}
父主题： 父组件开发

相关文档