angular - Truyền dữ liệu scope vào ng-content trong Angular2

Tôi đang tìm giải pháp để truyền dữ liệu phạm vi của thành phần hiện tại vào chỉ thị ng-content.

Tôi có mẫu thành phần app-table với dữ liệu mà tôi muốn truyền vào nội dung con, sử dụng một số giải pháp như sau:

<!-- 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

Và mẫu trang nơi tôi muốn sử dụng dữ liệu này:

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

Điều này có khả thi không?

Câu trả lời #1

Tôi đã gặp phải vấn đề tương tự, để làm rõ hơn, tôi đã thêm ví dụ của bạn đang hoạt động.

<!-- 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

Trong Component, bạn cần khai báo templateRef như sau.

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

  ...
}

Sau đó sử dụng thành phần của bạn như thế này.

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

Câu trả lời #2

Tôi nghĩ bạn có thể tìm thấy câu trả lời của mình ở đây: Angular 2 truyền HTML vào ng-content với các binding.

Thành phần ng-content được tài liệu kém, thật không may. Nó sẽ sớm được cải thiện, theo như vấn đề trên GitHub của Angular (https://github.com/angular/angular.io/issues/3099).