ค้นหาเว็บไซต์

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) มันจะได้รับการปรับปรุงในเร็วๆ นี้

บทความที่เกี่ยวข้อง