Angular 2中的列表項渲染器

Question

我得到了“啞”列表組件，該組件使用另一個“啞”組件來呈現單個項目。 當我想將數據傳遞給渲染器時，我的list組件必須具有相同的屬性。 例如，如果我想為項目設置“ showTimestamp”布爾屬性，則必須這樣做：

list.template.html

<my-item-renderer *ngFor="let item of items" [showTimestamp]="showTimestamp"></my-item-renderer>

有什么辦法可以代替組件模板的一部分嗎？

我想做這樣的事情：

<my-list [items]="items"><ng-content><item-renderer [showTimestamp]="true"></item-renderer></ng-content></my-list>

因此，我的列表僅獲得items屬性，而在ng-content中獲得具有已設置showTimestamp變量的渲染器。

Answer 1

您可以為此使用模板：

<my-list [items]="items">
  <template><item-renderer [showTimestamp]="true"></item-renderer></template></my-list>

@Component({
  selector: 'my-list',
  template: `
      <template ngFor [ngForOf]="items" [ngForTemplate]="templateRef"></template>`
})
class MyList {
  @Input() data;
  constructor(private templateRef:TemplateRef) {}
}

也可以看看

• 在Angular 2中使用ngForTemplate時的綁定事件
• 將數據傳遞給重復組件中被排除的重復元素
• Angular2子組件作為數據