Angular 2通过绑定将html传递给ng-content

Question

我正在为基础css框架编写角度组件.我正在处理选项卡组件,并希望能够将一些HTML传递给<ng-content>它.

问题是,我还需要传递用户可以绑定的html,如下所示:

父母模板

<tabs [data]='example'>
    <div> Age <br> {{item.age}} </div>`
</tabs>

TABS组件

<ul class="tabs" #tabs>
  <li *ngFor="let item of data | async" (click)="tabClick($event)">
      <a>{{item.name}}</a>
  </li>
</ul>
<div>
  <ng-content></ng-content>
</div>

TABS TYPESCRIPT

@Component({
  selector: 'tabs',
  templateUrl: './tabs.component.html'
})

export class TabsComponent {
  @Input('data') data:any;
  @ViewChild('tabs') tabs: ElementRef;
}

哪里item是对example数组中对象的引用.

不过,我得到这个错误: Cannot read property 'name' of undefined 因为item它插入之前正在评估<ng-content>指令.

有没有办法解决这个限制,或者我是以错误的方式解决这个问题？

Answer 1

更新Angular 5

ngOutletContext 被重命名为 ngTemplateOutletContext

另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

原版的

ngTemplateOutlet或者ngForTemplate可以用于该用例:

<tabs [data]='example'>
  <ng-template let-item>
    <div> Age <br> {{item.age}} </div>`
  </ng-template>
</tabs>

@Component({
  ...
  template: `
    <ul class="tabs" #tabs>
      <li *ngFor="let item of data | async" (click)="tabClick($event)">
          <a>{{item.name}}</a>
      </li>
    </ul>
    <div>
      <ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{$implicit: (data | async)}"></ng-template>
    </div>
  `
})
class TabsComponent {
  @ContentChild(TemplateRef) templateRef:TemplateRef;
}

另请参见Angular 2绑定已转换内容到循环变量