按钮组分为2个部分 [英] button group split in 2 components

问题描述

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

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

只要我将所有内容都放在1个组件中，且不包含ActionComponent的子级别，该想法就可以正常工作.但是当我将它们分开时(如上图所示)，事情就不再起作用了.

按钮未合并(请查看按钮的角).

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

如您所见，在<div class="btn-group">和<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]来进行了尝试.这样，我可以在ToolbarComponent的视图内定义ActionComponent如下:

  <div objt-action> </div>

但是生成的xml仍然无效，仍然存在令人不安的中间级别，即<div objt-action>本身.

解决方案

使用设置为组件.

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

一样使用它

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

，然后让*myDirective生成按钮.

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

Bootstrap has the following example of an action group. The result is that the buttons inside the group are merged together.

Inside my Angular project I already have a toolbar and wanted to apply these styles on them. Basically I have a ToolbarComponent and an ActionComponent.

The idea works fine as long as I put everything in 1 component without the sublevel of an ActionComponent. But when I seperate them (as shown in the picture above), then things don't work any more.

The buttons are not merged (look at the corners of the buttons).

When I open the runtime html code in google chrome, it shows the following:

As you can see, there's a level in-between the <div class="btn-group"> and <div class="btn">. (i.e. the tag of the ActionComponent itself: <objt-action>). My best guess, is that this tag messes things up.

My best guess, is that this additional tag breaks the bootstrap logic.

So, now I'm wondering about the best strategy to solve my problem.

VIEW CODE OF 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>

EDIT

In mean time, I also tried it by changing the directive of the component, from objt-action to [objt-action]. By doing so, I can define the ActionComponent as follows inside the ToolbarComponent's view:

  <div objt-action> </div>

But the resulting xml is still invalid, there still remains a disturbing intermediate level, i.e. the <div objt-action> itself.

解决方案

With the approach mentioned in How to remove/replace the angular2 component's selector tag from HTML you need to make this element <div class="action-group" aria-label="Basic example"> the component.

What you tried is to have a component that doesn't add a tag at all, that is not possible. You could use a structural directive and use it like

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

and then let *myDirective generate the buttons.

See also https://angular.io/guide/structural-directives

这篇关于按钮组分为2个部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！