angular2+ 如何封装列表?

Question

用法类似以下

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

Answer 1

使用组件：<!--&nbsp;#itemTemp&nbsp;通过参数[itemTemplate]传入组件,&nbsp;[action]传入获取列表的方法，需要bind(this)&nbsp;--><app-list&nbsp;[itemTemplate]="itemTemp"&nbsp;[action]="action"> &nbsp;&nbsp;&nbsp;<!--&nbsp;let-xx&nbsp;定义组件传出来的item&nbsp;--> &nbsp;&nbsp;<ng-template&nbsp;#itemTemp&nbsp;let-item> &nbsp;&nbsp;&nbsp;&nbsp;<div>{{item.title}}</div> &nbsp;&nbsp;</ng-template></app-list>定义组件：<ul> &nbsp;&nbsp;<li&nbsp;*ngFor="let&nbsp;item&nbsp;of&nbsp;list"> &nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;[outlet]&nbsp;使用传入的模板&nbsp;[context]定义传给&nbsp;let-xx&nbsp;的数据，$implicit&nbsp;为默认传参&nbsp;--> &nbsp;&nbsp;&nbsp;&nbsp;<ng-template &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[ngTemplateOutlet]="itemTemplate" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[ngTemplateOutletContext]="{$implicit:&nbsp;item}"> &nbsp;&nbsp;&nbsp;&nbsp;</ng-template> &nbsp;&nbsp;</li></ul>