按钮组分为2个组件

Question

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

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

already has a value

只要我将所有内容放在1个组件中而没有<div class="btn-group">的子级别，这个想法就可以正常工作。但是当我把它们分开时（如上图所示），那么事情就不再适用了。

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

当我在谷歌浏览器中打开运行时html代码时，它会显示以下内容：

正如您所看到的，在<div class="btn">和ActionComponent之间有一个等级。（即<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]到ActionComponent来尝试。通过这样做，我可以在ToolbarComponent的视图中定义 <div objt-action> </div> 如下：

<div objt-action>

但是得到的xml仍然无效，仍然存在令人不安的中间级别，即{{1}}本身。

Answer 1

使用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