angular2+ 如何封装列表?

Question

用法类似以下

<app-list>
  <div>{{'这里需要模板传出来的item'}}</div>
</app-list>

Answer 1

自问自答

使用组件：

<!-- #itemTemp 通过参数[itemTemplate]传入组件, [action]传入获取列表的方法，需要bind(this) -->
<app-list [itemTemplate]="itemTemp" [action]="action">
   <!-- let-xx 定义组件传出来的item -->
  <ng-template #itemTemp let-item>
    <div>{{item.title}}</div>
  </ng-template>
</app-list>

定义组件：

<ul>
  <li *ngFor="let item of list">
    <!-- [outlet] 使用传入的模板 [context]定义传给 let-xx 的数据，$implicit 为默认传参 -->
    <ng-template
      [ngTemplateOutlet]="itemTemplate"
      [ngTemplateOutletContext]="{$implicit: item}">
    </ng-template>
  </li>
</ul>