在内容子项之间添加分隔符答案

【问题标题】：Adding a separator between content children在内容子项之间添加分隔符
【发布时间】：2025-06-11 03:55:02
【问题描述】：

在ItemsComponent 中有一个ng-content 指令，我有兴趣在每个内容子项之间自动插入一个<hr> 元素。我相信处理它的最佳位置是 ItemsComponent 本身。

有没有一种方法可以不用隐藏最后一个<hr> 和display: none？

演示：https://stackblitz.com/edit/angular-ivy-oyypmx

【问题讨论】：

【解决方案1】：

如果您不想使用 CSS 隐藏最后一个 <hr>，为什么不在 <app-item> 指令中发送参数
<app-item 'showHR'></app-item>。
如果参数可用，则在您的项目后显示<hr>。
第二种方法是为每个项目使用顶部和底部边框，然后您不必担心在最后一项之后隐藏它。

编辑：您可以使用 CSS 来实现它。您将无法添加<hr>，但您可以在每个<app-item> 之后使用border-bottom，然后不要在最后一个元素之后显示它。

app-item {
display: flex; 
 margin: 3px 0px; 
 border-bottom: 1px solid black;
}

app-item:last-child {
  border-bottom: none;
}

【讨论】：

因为这样会要求组件的使用者做一些理想情况下会自动完成的事情。
添加了另一种使用 CSS 的方法，请检查。
这与我目前拥有的 :host:last-child > hr { display: none } 非常接近，我只是想也许有一种方法可以使用 ViewContainerRef.indexOf 或类似的东西来做到这一点
在我看来，这会使一项相当简单的任务变得复杂。除非有非常充分的理由这样做。