Angular - стиль Bootstrap не работает во вложенных компонентах - PullRequest
Новая
       13

Angular - стиль Bootstrap не работает во вложенных компонентах

0 голосов
/ 20 ноября 2018

Я пытаюсь создать таблицу с вложенным компонентом для строк, вот что у меня есть:

Родительский файл: 

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>TITLE</th>
      <th>DESCRIPTION</th>
      <th>USER</th>
      <th>OWNER</th>
    </tr>
  </thead>
  <app-ticket *ngFor="let ticket of tickets" [ticket]="ticket"></app-ticket>
</table>

app-ticket: 

<tr>
  <td>{{ticket.id}}</td>
  <td>{{ticket.title}}</td>
  <td>{{ticket.description}}</td>
  <td>{{ticket.email}}</td>
  <td>{{ticket.owner}} <button class="btn btn-warning">TEST</button></td>
</tr>

Но стиль начальной загрузки для строк не работает, я искал, и люди предлагают поместить tr / td в корневой компонент, но иногда это неосуществимоЕсть ли хорошее решение для этого, особенно с многоуровневыми компонентами?

1 Ответ

0 голосов
/ 20 ноября 2018

Один из способов добиться этого - сделать компонент похожим на директиву: 

@Component({
    selector: 'tr[app-ticket]',
    templateUrl: './app-ticket.component.html',
    styleUrls: ['./app-ticket.component.scss']
})
export class AppTicketComponent {

    @Input() ticket: Ticket;

}

HTML-шаблон: 

<td>{{ticket.id}}</td>
<td>{{ticket.title}}</td>
<td>{{ticket.description}}</td>
<td>{{ticket.email}}</td>
<td>{{ticket.owner}} <button class="btn btn-warning">TEST</button></td>

, а затем использовать его следующим образом: 

<tr app-ticket *ngFor="let ticket of tickets" [ticket]="ticket"></tr>

Это непосредственно отобразит tr внутри таблицы, а не оставит тег для вашего компонента.

...