Как переместить тело таблицы в другой компонент, чтобы не нарушать стилизацию

Question

У меня довольно большой компонент таблицы, и я хочу разделить его тело в новом компоненте.Каждый раз, когда я пытаюсь это сделать, стилизация таблицы нарушается (из-за новой структуры HTML в коде, я думаю), я использую угловую 5.

Я пытался создать новый компонент с кодомэто было на самом деле внутри секции body в исходной таблице, но пользовательский интерфейс отображается ужасным образом, выглядит не очень хорошо.Столбцы разбиты, галочки тоже.Я думаю, что стили ngPrime не работают, ну, я совершенно уверен в этом.

Оригинальный код:

<p-table 
         [value]="data"
         ...
>
  <ng-template  pTemplate="body" let-row let-expanded="expanded" let-rowIndex="rowIndex">
    <tr class="cursor-pointer" 
        [pContextMenuRow]="row"
        [pSelectableRow]="row"
        [pSelectableRowIndex]="rowIndex">

      <td *ngFor="let col of columns" class="{{col.styleClass}}">
        <span class="ui-column-title">{{col.header}}</span>
        <p-checkbox
          *ngIf="shouldShowCheckbox()"
          binary="true"
          [disabled]="!isEditable"
          (onChange)="toggle($event, col.field, rowIndex)">
        </p-checkbox>
      </td>
    </tr>
  </ng-template>


</p-table>

---

Мой код в html-файле:

<tr class="cursor-pointer"
    [pContextMenuRow]="row"
    [pSelectableRow]="row"
    [pSelectableRowIndex]="rowIndex">

  <td *ngFor="let col of columns" class="{{col.styleClass}}">
    <span class="ui-column-title">{{col.header}}</span>
    <p-checkbox
      *ngIf="shouldShowCheckbox()"
      binary="true"
      [disabled]="!isEditable"
      (onChange)="toggle($event, col.field, rowIndex)">
    </p-checkbox>
  </td>
</tr>

Мой код в TS-файле:

@Component({
  selector: 'table-body',
  template: './table-body.component.html',
  styleUrls: ['./table-body.component.scss']
})
export class TableBodyComponent implements OnInit {

  @Input() columns: any[];
  @Input() row: any;
  @Input() rowIndex: number;
  @Input() isEditable: boolean;

  constructor() {
  }

  ngOnInit() {
  }
}

Таблица после моего рефакторинга:

<p-table 
         [value]="data"
         ...
>
  <ng-template  pTemplate="body" let-row let-expanded="expanded" let-rowIndex="rowIndex">
    <table-body [columns]="columns"
                [row]="row"
                [rowIndex]="rowIndex"
                [isEditable]="isEditable"
    ></table-body>
  </ng-template>


</p-table>

В результате я хотел бы иметь точно такую ​​же страницу после этого рефакторинга.Кто-нибудь знает, как передать стилирование этому новому дочернему компоненту или как заставить этот стиль работы снова работать?

Answer 1

Вам необходимо использовать селектор атрибута с компонентом.

Таким образом, вы бы использовали такой компонент:

<p-table [value]="data">
  <ng-template  ...>
    <tr table-body ...></tr>
  </ng-template>
</p-table>

Затем вы бы определили селектор следующим образом:

@Component({
  selector: 'tr[table-body]',
  ...
})

Внутри шаблона у вас больше не будет доступа к тегу <td>, но у компонента есть привязка host, которая позволяет изменять классы или стили из компонента.

https://angular.io/api/core/Directive#host