如何在组件外定义模板

Question

我正在尝试构建一个 table 组件（具有标准功能），其中应将行定义为模板。

目前我试过这种方式（代码简化）：

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>

所以：

使用模板
行已正确重复
但我无法显示 item 属性；行未绑定到 *ngFor 中的 "item"，而是绑定到 MyPage 本身。 ps：如果我 select Augury 一行，在控制台 $a.context 中正确包含项目和索引。

我该如何解决这个问题？

Answer 1

我发现模板语法需要 "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

如何在组件外定义模板

How to define template outside component

angular2-template

angular