Twitter bootstrap 按钮组分为两个组件

Bootstrap具有以下动作组示例。 结果是组中的按钮合并在一起

在我的Angular项目中，我已经有了一个工具栏，并希望在其上应用这些样式。基本上我有一个

ToolbarComponent

和一个

ActionComponent

只要我将所有内容都放在一个组件中，而不包含

ActionComponent

的子级别，这个想法就行了。但是当我把它们分开时（如上图所示），事情就不再起作用了

按钮未合并（查看按钮的角）

当我在google chrome中打开运行时html代码时，它显示以下内容：

如您所见，在

和

之间有一个级别（即

动作组件本身的标记：
）。我最好的猜测是，这个标签把事情搞砸了

我最好的猜测是，这个额外的标签打破了引导逻辑。

所以，现在我想知道解决我的问题的最佳策略

查看工具栏组件的代码
但是生成的xml仍然无效，仍然存在一个令人不安的中间级别，即
本身。
使用中提到的方法，您需要将此元素
作为组件

您尝试的是使用一个根本不添加标记的组件，这是不可能的。
您可以使用结构指令，并像

<div class="action-group" aria-label="Basic example">
  <ng-container *myDirective></ng-container>
</div>



然后让
*myDirective
生成按钮

另请参见
我不明白问题所在。产生这个DOM的代码是什么？@GünterZöchbauer我添加了
工具栏组件
视图的代码。我省略了typescript代码，因为我认为它很长而且不相关。谢谢你看。看起来很有前途，我来试试看。：）我确实找到了创建属性的指令示例，以及一个创建嵌入式视图的结构指令示例
this.viewContainer.createEmbeddedView（this.templateRef）以显示/隐藏其主体。但我没有找到任何实际创建html标记的指令示例。（例如按钮）-我检查了“Bootstrap-powered-Angular”的源代码，查看它们的标签代码。因为这是一个类似的问题：找到了一个带有Tab指令的
TabSet
组件。但是仍然是包含html的
TabSet
组件。所以，我开始怀疑这是否可能请举个例子。如果您使用
，那么
templateRef
将引用
，因此您的代码实际上会添加
，您可以多次添加同一模板。我想这概括了您的答案：“将大多数html移动到根组件”。。。这是一个合理的解决方案。
  <div objt-action> </div>

<div class="action-group" aria-label="Basic example">
  <ng-container *myDirective></ng-container>
</div>