组件嵌套是不可避免的,过度嵌套会陷入复杂和冗余
组件本身和外界的交互,通过@Input和@Output
避免组件嵌套导致冗余数据和事件传递:内容投影、 路由、指令、服务
投影组件
<ng-content select="样式类/标签/指令"></ng-content>
组件:
<ng-content select=""></ng-content>
:host{
display: flex;
overflow-x: auto;
}
父组件:
<app-horizontal-grid >
<div appGridItem *ngFor="let item of channels">
<img [src]="item.icon" alt="" appGridItemImage="2rem" fitMode="none" >
<span appGridItemTitle="1rem">{{ item.title }}</span>
</div>
<span appGridItem >
<div appGridItemImage="2rem" style="background-color: red;" ></div>
<span appGridItemTitle="1rem"></span>
</span>
</app-horizontal-grid>