Angular + Bootstrap样式与子组件分离

Question

我正在尝试使用引导程序的按钮组，其原始HTML中的外观如下：

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

必须严格遵守此层次结构（即：在<labels>之间放置元素会破坏CSS）。

在我的Angular代码中，按钮非常复杂，并且通过*ngFor驱动，因此我决定提取按钮组件结构（即<label><input></label>）作为其自己的组件。所以我的按钮组模板如下所示：

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <ng-container *ngFor="let actionType of actionTypes">
    <ek-action-button [actionType]="actionType"></ek-action-button>
  </ng-container>
</div>

但是，这会破坏CSS，因为父/子关系在渲染时会发生变化。我还读过其他问题，这些情况下应该使用属性选择器（即：[ek-action-button]），但这仍然在它们之间放置了一个额外的元素并破坏了CSS。

有什么解决办法吗？如何删除主机？我不能在ng-container上使用属性选择器。