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

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通过绑定将html传递给ng-content.

遗憾的是,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

在Component中，需要这样声明templateRef。

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

  ...
}

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

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

Answer 3

预付款：

1. 为模板设置名称以使用多个模板
2. 传递多个参数

使用此代码：

<table>
  <tr *ngFor="let item of data">
    <ng-container *ngTemplateOutlet="tmplRef;
            context: {$implicit: item, item2: item2}">
    </ng-container>
    <ng-container *ngTemplateOutlet="tmplRef2;
            context: {$implicit: item, item2: item2}">
    </ng-container>
  </tr>
</table>

export class AppTableComponent {
  ...
  @ContentChild('tmpl') tmplRef: TemplateRef<any>;
  @ContentChild('tmpl2') tmplRef2: TemplateRef<any>;
  ...
}

<app-table>
  <ng-template #tmpl let-item let-item2="item2">
    <td>{{item.Name}}</td><td>{{item2.Name}}</td>
  </ng-template>
  <ng-template #tmpl2 let-item let-item2="item2">
    <td>{{item.Name}}</td><td>{{item2.Name}}</td>
  </ng-template>
</app-table>