在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5/ angular2+ 如何封裝列表?

angular2+ 如何封裝列表?

用法類似以下

<app-list>
  <div>{{'這里需要模板傳出來的item'}}</div>
</app-list>
回答
編輯回答
蔚藍色

自問自答

使用組件:

<!-- #itemTemp 通過參數(shù)[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 的數(shù)據(jù),$implicit 為默認傳參 -->
    <ng-template
      [ngTemplateOutlet]="itemTemplate"
      [ngTemplateOutletContext]="{$implicit: item}">
    </ng-template>
  </li>
</ul>
2017年4月20日 06:39