如何将角度按钮组件放入引导按钮组中

Question

我有以下按钮组：

<div class="btn-group">
  <app-remove-button></app-remove-button>
  <button type="button" class="btn btn-outline-secondary">b2
  </button>
</div>

app-remove-button 是一个带有模板的组件：

<button class="btn btn-outline-danger" type="button" ngbTooltip="hint">
<b>&times;</b></button>

这未正确呈现：

html 输出为：

我怎样才能让它看起来像：

Answer 1

更改组件的选择器：

应用程序删除按钮 → [应用程序删除按钮]

您现在可以将它用作一个属性（摆脱最终 HTML 中添加的会扰乱您的样式的选择器）：

<div class="btn-group">
  <button app-remove-button></button>
  <button type="button" class="btn btn-outline-secondary">b2
  </button>
</div>

Answer 2

使用以下代码扩展您的引导 CSS：

.btn-group > [in-group]:not(:first-child) > .btn {
  margin-left: -1px; 
}

.btn-group > [in-group]:not(:last-child):not(.dropdown-toggle) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; 
}

.btn-group > [in-group]:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; 
}

然后在组件按钮中添加

in-group

属性。

<div class="btn-group">
  <app-remove-button in-group></app-remove-button>
</div>