angular - ng-content 使用時に内部コンポーネントを削除する方法

Question

これを書くことができるように、ポップアップメニューを除外しようとしています：

<panel-menu>
  <panel-menu-item>Edit input</panel-menu-item>
  <panel-menu-item>Edit mappings</panel-menu-item>
  <panel-menu-item divider-before>Show agent code</panel-menu-item>
</panel-menu>

次の HTMLを持つpanel-menuコンポーネントがあります。

<div class="btn-group" [class.open]="...">
  <button type="button" class="btn btn-default" (click)="..."><i class="ion-gear-b icon-lg"></i></button>
  <ul class="dropdown-menu dropdown-menu-right">
    <ng-content select="panel-menu-item"></ng-content>
  </ul>
</div>

そしてpanel-menu-itemこのHTMLで：

<li *ngIf="dividerBefore" class="divider"></li>
<li><a><ng-content></ng-content></a></li>

問題は、結果の DOM に と のpanel-menu-item間に がulありli、サードパーティの CSS が壊れることです。

子供自身ではなく、選択した子供のコンテンツだけを投影する方法はありますか?

This answerliは、コンポーネントの代わりに属性を使用することを提案していますが、実装が漏れています。のユーザーは、panel-menuメニュー項目がどの要素として実装されているかを知る必要はありません。