angular - ส่งข้อมูล scope เข้าไปใน ng-content ใน Angular2
ฉันกำลังหาวิธีในการส่งข้อมูลของสโคปคอมโพเนนต์ปัจจุบันเข้าไปในคำสั่ง 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>
นี่เป็นไปได้หรือไม่?
คำตอบ #1
ฉันเจอปัญหาเดียวกัน เพื่อความชัดเจนมากขึ้น ฉันได้เพิ่มตัวอย่างของคุณที่ใช้งานได้
<!-- 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>
คำตอบ #2
ฉันคิดว่าคุณอาจหาคำตอบได้ที่นี่: Angular 2 ส่งมอบ html ไปยัง ng-content พร้อมกับการผูกข้อมูล
ส่วนประกอบ ng-content มีเอกสารประกอบน้อยมาก น่าเสียดาย ตามที่ระบุในปัญหา GitHub ของ Angular (https://github.com/angular/angular.io/issues/3099) มันจะได้รับการปรับปรุงในเร็วๆ นี้
