Bootstrap具有以下动作组示例。结果是组内的按钮被合并在一起。按钮组拆分为2个组件

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

的想法，只要罚款，我把一切都放在1个组件没有的分段工作。但是当我把它们分开时（如上图所示），那么事情就不再起作用了。

按钮不合并（查看按钮的角落）。

当我打开谷歌浏览器运行HTML代码，它显示以下内容：

正如你所看到的，有一个水平之间的<div class="btn-group">和<div class="btn"> 。（即，本身的标签：<objt-action>）。我最好的猜测是，这个标签混乱了事情。

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

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

的`ToolbarComponent`

<div class="d-flex flex-wrap justify-content-start" role="toolbar" aria-label="toolbar"> 

<!-- iterate action-groups --> 
<div *ngFor="let actionGroup of actionGroups" class="btn-group p-1" role="group"> 

    <!-- for each action-group, iterate thru the actions of the group --> 
    <ng-template ngFor let-action [ngForOf]="actionGroup.actions"> 
    <objt-action [action]="action" (actionClicked)="actionClicked($event)"></objt-action> 
    </ng-template> 

</div> 

</div>

编辑

查看代码的平均时间，我也通过改变成分的指令，从objt-action到[objt-action]试了一下。通过这样做，我可以定义的ToolbarComponent的视图内，如下所示：

<div objt-action> </div>

但所得到的XML仍无效，仍然存在一个令人不安的中间电平，即<div objt-action>本身。

来源

2017-08-29 bvdb

我不明白问题所在。什么是导致这个DOM的代码？ –

@GünterZöchbauer我添加了“ToolbarComponent”视图的代码。我忽略了打字稿的代码，因为它很安静，我觉得无关紧要。谢谢你看看。 – bvdb

使用How to remove/replace the angular2 component's selector tag from HTML中提到的方法，您需要将此元素设置为<div class="action-group" aria-label="Basic example">组件。

你试过的是有一个组件根本不添加标签，这是不可能的。你可以使用一个结构性指令，并使用它像

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

，然后让*myDirective产生的按钮。

另请参见https://angular.io/guide/structural-directives

来源

2017-08-29 16:39:56

看起来很有希望，我会放手一搏。 :) – bvdb

我确实找到了创建属性的指令示例，以及1个创建嵌入视图'this.viewContainer.createEmbeddedView（this.templateRef）;'的结构指令示例来显示/隐藏它的主体。但是我没有找到任何实际创建html标签的指令的例子。（例如按钮） - 我检查了“Bootstrap powered Angular”的源代码以查找它们的标签代码。因为它是一个类似的问题：使用Tab指令找到一个TabSet组件。但仍然是包含html的'TabSet'组件。所以，我开始怀疑这是否可能。 - 一个例子，将不胜感激。 – bvdb

如果你使用'<按钮* myDirective>''然后将templateRef'参考''，所以您的代码将实际添加'' –

按钮组拆分为2个组件

的ToolbarComponent

编辑

回答

相关问题

的`ToolbarComponent`