我正在尝试排除弹出菜单,所以我可以这样写:
<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>
我有一个panel-menu
带有这个 HTML 的组件:
<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
之间有一个,这会破坏第三方 CSS。ul
li
有没有办法只投射所选儿童的内容,而不是儿童本身?
这个答案建议在组件上使用属性li
而不是组件,但这会泄漏实现。的用户panel-menu
不需要知道菜单项的实现方式是什么元素。