如何在組件外定義模板

我想構建一個表格組件（具有標準功能），其中行應該被定義爲模板。如何在組件外定義模板

目前我試圖這樣（代碼簡化）：

1）父組件

@Component({ 
    selector: 'simple-grid', 
    template: `<table><tbody> 
     <ng-container *ngFor="let item of items; let i = index"> 
      <template 
       [ngTemplateOutlet]="template" 
       [ngOutletContext]="{'item': item, 'i': i}"> 
      </template> 
    </ng-container> 
     </tbody></table> 
    ` 
}) 
export class SimpleGridComponent { 
    @Input() 
    items: any[] = []; 
    @ContentChild(TemplateRef) 
    template: any; 
}

2）的使用：

@Component({ 
    selector: 'simple-grid', 
    template: ` 
     <simple-grid [items]="users" > 
      <template> 
      <tr [class.even]="i%2==0" [class.odd]="i%2!=0"> 
       item: {{item?.id}} {{ someProperty }} {{id}} 
      </tr> 
      </template> 
     </simple-grid>` 
}) 
MyPage{ 
    public users: Users = [{id: 1, name='one'}, {id: 2, name='two' }]; 
    public someProperty: string = 'dummy'; 
}

結果：

<table> 
    <tbody> 
    <tr> 
     item: dummy 
    </tr> 
    <tr> 
     item: dummy 
    </tr> 
    <tbody> 
</table>

so：

模板用於
行是正確的重複
，但我沒能表現出項目性能;行不綁定到* ngFor中的「item」，而是MyPage本身。 ps：如果我選擇帶有Augury的行，在控制檯$ a.context中正確包含項目和索引。

我該如何解決這個問題？

來源

2016-10-26 Sierrodc

我發現模板語法需要「let-」屬性來使用模板上下文中可用的項目。

所以，我定這樣的代碼：

@Component({ 
    selector: 'simple-grid', 
    template: ` 
    <simple-grid [items]="users" > 
     <template let-item="item" let-index="i"> 
     <tr [class.even]="index%2==0" [class.odd]="index%2!=0"> 
      item: {{item?.id}} {{ someProperty }} {{id}} 
     </tr> 
     </template> 
    </simple-grid>` 
}) 
MyPage{ 
    public users: Users = [{id: 1, name='one'}, {id: 2, name='two' }]; 
}

例如plunker：https://plnkr.co/edit/PwSpjy4KTYjstGWTWP24?p=preview

來源

2016-10-27 08:48:26 Sierrodc

如何在組件外定義模板

回答

相關問題