Question

我正在寻找将当前组件范围数据传递到ng-content指令的解决方案。

我有app-table组件模板，其中包含我希望传递给子内容的数据，使用这样的解决方案：

<!-- some html before -->
<table>
    <!-- complex header markup with sorting/filtering support -->

    <tr *ngFor="let item of data">
         <ng-content [value]="item"></ng-content> //how to pass data?
    </tr>
</table>
//some html after

我希望使用此数据的页面模板：

<app-table>
     <td>{{value.Name}}</td>
     ...
</app-table>

这可能吗？

Answer 1

我想你可以在这里找到答案：Angular 2 passing html to ng-content with bindings。

遗憾的是，ng-content组件记录得很糟糕。根据Angular GitHub问题（https://github.com/angular/angular.io/issues/3099），它很快就会出现。

Answer 2

我遇到了同样的问题，为了更清楚，我添加了您的示例工作。

<!-- some html before -->
<table>
    <!-- complex header markup with sorting/filtering support -->

    <tr *ngFor="let item of data">
      <ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{$implicit: item}"></ng-template>
    </tr>
</table>
//some html after

在组件中，你需要像这样声明templateRef。

export class AppTableComponent {
  ...
  @ContentChild(TemplateRef) templateRef: TemplateRef<any>;

  ...
}

然后你像这样使用你的组件。

<app-table>
 <ng-template let-item>
     <td>{{item.Name}}</td>
     ...
 </ng-template>
</app-table>

将范围数据传递到Angular2中的ng-content

2 个答案: