Angular использовать родительскую область видимости в ng-контейнере

Question

У меня есть компонент сетки с некоторыми конфигами.

Я хочу определить thead и tbody, пока я использую компонент. Это мой компонент

@Component({
selector: 'tcs-grid',
templateUrl: './tcs-grid.component.html',
styleUrls: ['./tcs-grid.component.scss']
})

export class TcsGridComponent implements OnInit {
data : any;
//some configs
}

Это Html шаблон

  <table datatable class="table tablesorter" [dtOptions]="dtOptions">
      <ng-content>

      </ng-content>
  </table>

Теперь я хочу использовать его вот так

Использование:

<tcs-grid>
<thead >
    <tr>
      <th width="50px" >Row</th>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody *ngIf="data?.length != 0">
    <tr *ngFor="let person of data;index as i">
        <td>{{ i + startPoint }}</td>
        <td>{{ person.id }}</td>
        <td>{{ person.firstName }}</td>
        <td>{{ person.lastName }}</td>
    </tr>
</tbody>
</tcs-grid>

Я знаю, что с помощью генератора событий вы можете выводить данные. Я хочу знать, если есть лучший способ получить доступ к данным в компоненте сетки (родитель).

Спасибо

Answer 1

Я нахожу решение с помощью ng-шаблона, вы можете создавать частичные шаблоны!

Не забудьте добавить контекст, чтобы связать ваши родительские переменные области видимости

Шаблон:

<table datatable class="table tablesorter" [dtOptions]="dtOptions">
   <ng-container  *ngTemplateOutlet="layoutTemplate; context: {persons: data}"  >

   </ng-container>
</table>

Компонент:

export class TcsGridComponent implements OnInit {
@ContentChild(TemplateRef,null)
@Input() layoutTemplate: TemplateRef<any>;

data : any;

ngAfterContentInit()
{
//your code 
}
}

Использование:

 <tcs-grid>
 <ng-template let-persons="persons">
    <thead >
    <tr>
      <th width="50px" >Row</th>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
   <tbody *ngIf="persons?.length != 0">
    <tr *ngFor="let person of persons;index as i">
        <td>{{ i + startPoint }}</td>
        <td>{{ person.id }}</td>
        <td>{{ person.firstName }}</td>
        <td>{{ person.lastName }}</td>
    </tr>
   </tbody>
  </ng-template >
  </tcs-grid>

Вы можете обращаться к переменным в родительской области, называя let-yourvariablename.