javascript - Angular 2 通过绑定(bind)将 html 传递给 ng-content

Question

我正在为基础 CSS 框架编写 Angular 组件。我正在处理选项卡组件，并希望能够将一些 HTML 传递给 <ng-content>

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

父模板

<tabs [data]='example'>
    <div> Age <br> {{item.age}} </div>`
</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 类型脚本

@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 bind transcluded content to loop variable