首頁猿問 angular2+ 如何封裝列表?

angular2+ 如何封裝列表?

JavaScript

隔江千里 2018-08-18 21:51:53

用法類似以下<app-list> <div>{{'這里需要模板傳出來的item'}}</div></app-list>

查看完整描述

1 回答

嗶嗶one

TA貢獻(xiàn)1854條經(jīng)驗(yàn) 獲得超8個(gè)贊

使用組件：

<!-- #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 為默認(rèn)傳參 -->
    <ng-template
      [ngTemplateOutlet]="itemTemplate"
      [ngTemplateOutletContext]="{$implicit: item}">
    </ng-template>
  </li></ul>

反對回復(fù) 2018-08-19