angular8组件嵌套

组件嵌套是不可避免的，过度嵌套会陷入复杂和冗余

组件本身和外界的交互，通过@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>