angular 投影概念

投影的概念 就是组件里面的ng-content部分 可以被组件外部包裹的元素替代。

  <ng-content select="[appGridItem]"></ng-content>

例如，我们现在有个组件

  <app-horizontal-grid>
    <span appGridItem *ngFor="let item of channels">
      <img appGridItemImage="2rem" [src]="item.icon" alt="" />
      <span appGridItemTitle="0.6rem" class="title">{{ item.title }}</span>
    </span>
  </app-horizontal-grid>
</div>

对于span包裹的这部分内容 就是要传给组件内部 投影区域显示的的内容

组件内部模板.html代码

<div
  class="container"
  [ngStyle]="{
    'grid-template-rows': templateRows,
    'grid-template-columns': templateColumns
  }"
  (scroll)="handleScroll($event)"
>
  <ng-content select="[appGridItem]"></ng-content>
</div>

外面span这部分内容 就会替换对应位置的ng-content。达到你想要的效果。

select 表明包含 appGridItem的指令的元素 才能穿透过来