从ngContent传递数据

Question

我想创建生成datagrid的childComponent。因此，我创建了grid.component.html和grid.component.ts。我的目标是，队友永远不要碰到grid.ts和grid.html。因为我的应用程序中所有页面的网格结构都相似。因此，它们仅添加为myComponent.html和myComponent.ts之类的内容。他们会将button的html和button的click事件写入myComponent。我可以创建网格。但是我的问题是，我无法在showDetail方法中访问rowData。 （“ rowData”是primeNg指令的隐式。我没有在任何地方进行设置。我只给出了p表值。）

myComponent.html

<app-grid>
  <ng-template pTemplate="body" let-rowData="rawData">
        <button label="Reject" (click)="reject(rowData)"></button>
        <button label="Detail" (click)="showDetail(rowData)"></button>
  </ng-template>
</app-grid>

myComponent.ts

reject(data){
  console.log("Reject data ", data);
}

showDetail(data){
   console.log("showDetail data ", data);
}

grid.component.html

rawData = {}

@ContentChild(TemplateRef)
templateRef : TemplateRef<any>;

grid.component.ts

<p-table [value]="globalVariables.myData">
   <ng-template pTemplate="body" let-rowData>  // This rowData come from PrimeNg "implicit" value
     <tr>
       <td *ngFor="let col of globalVariables.columns">
          {{ rowData[col.field] }}
       </td>
       <td>
         <ng-template *ngTemplateOutlet="templateRef; context : {rawData : rawData}"></ng-template>
       </td>
     </tr>
   </ng-template>
</p-table>

Answer 1

您正在寻找的是可以用作零件父组件app-grid的动态html模板。因此，您应该使用<ng-template>而不是<ng-content>。

您app-grid将为

grid.component.html

<table>
    <tr>
      <td>
        <ng-template 
     *ngTemplateOutlet="templateRef; context : {rawData : rawData, reject : reject, showDetail : showDetail}"
     >
     </ng-template>
      </td>
    </tr>
</table>

grid.component.ts

import { Component, OnInit, Input, TemplateRef, ContentChild } from '@angular/core';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css']
})
export class GridComponent implements OnInit {

  constructor() { }

  rawData = { content : " some content here"}

  @ContentChild(TemplateRef)
  templateRef : TemplateRef<any>;

  ngOnInit() {
  }

  reject(data){
    console.log("Reject data ", data);
  }

  showDetail(data){
     console.log("showDetail data ", data);
  }

}

使用组件网格

<app-grid>
  <ng-template let-rowData="rawData" let-reject="reject" let-showDetail="showDetail">
    <button label="Reject" (click)="reject(rowData)">Reject</button>
    <button label="Detail" (click)="showDetail(rowData)">Show Details</button>
  </ng-template>
</app-grid>

您可以在此处查看工作副本-https://stackblitz.com/edit/angular-g15twn

Answer 2

在子组件中使用 @Input

<ng-content [rowData] = 'rowData' ></ng-content>

myComponent.ts

@Input rowData: any;