Angular - Bootstrap 样式在嵌套组件中不起作用答案

【问题标题】：Angular - Bootstrap style not working in nested componentsAngular - Bootstrap 样式在嵌套组件中不起作用
【发布时间】：2018-11-21 06:03:35
【问题描述】：

我正在尝试为行创建一个带有嵌套组件的表，这就是我所拥有的：

父文件：

<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 放在根组件中，但这有时是不可行的，特别是对于多级组件，是否有一个好的解决方案这个？

【问题讨论】：

标签： angular angular-ui-bootstrap

【解决方案1】：

实现这一点的一种方法是使组件成为类似指令的组件：

@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，而不是为您的组件留下标签。

【讨论】：