2つのコンポーネントに分割されたボタングループ

Question

ブートストラップには、次のアクショングループの例があります。 その結果、グループ内のボタンがマージされます。

私の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> 

EDIT

OF

ビューコード、Iはまたobjt-actionから[objt-action]に、成分の指令を変更することによりそれを試してみました。そうすることによって、ToolbarComponentのビュー内以下のようにIは​​を定義することができる：

<div objt-action> </div> 

しかし、結果のXMLが依然として無効である、依然として妨害中間レベル、即ち<div objt-action>自体が残っています。

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