云消息服务 KooMessage
云消息服务 KooMessage
- 最新动态
- 功能总览
- 产品介绍
- 计费说明
- 快速入门
- 用户指南
- 最佳实践
- 开发指南
- API参考
- 常见问题
- 视频帮助
- 文档下载
- 通用参考
更新时间:2023-02-09 GMT+08:00
链接复制成功!
父组件代码示例
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; }
父主题: 父组件开发