如何设置页面上最后一个 Angular 组件的样式？

Question

我在组件的 HTML 中最外层的 div 上设置了样式 border-bottom: 1px solid pink。该组件的使用就像创建表格错觉的行一样。我希望它们中的最后一个具有不同的样式（即使边框不可见）。

我希望使用:last-child，但注意到每个元素都有样式，因为在组件的范围内，只有一个最外层的 div。我根据ngFor 中的last 值找到了this solution，但这在我的情况下并不好，因为这些行可能是数组的一部分，但也会在经过 ngfor'ed 的数组之后一个接一个地添加。

我需要的是一种工具来标记页面上最后一次出现的组件并相应地设置样式但是在组件本身内部进行。有可能吗？

以下是基于以下答案的 sn-p。第二个对象没有在最后一个元素上获得额外的样式，而第一个则有（通过分配类last）。

div.last {
  background-color: yellow;
}

div:host(:last-child) {
  background-color: yellow;
}

div {
  padding: 5px;
  margin: 5px;
  border: 2px solid black;
  max-width: 300px;
  display: flex;
  flex: 1;
  justify-content: center;
}

div.outer {
  border-color: purple;
}

div.middle {
  border-color: olive;
}

div.inner {
  border-color: orange;
}

div.multi {
  border-color: pink
}

div.last {
  background-color: yellow;
}

div:host(:last-child) {
  background-color: yellow;
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <div class="multi">A</div>
      <div class="multi">B</div>
      <div class="multi last">C</div>
    </div>
  </div>
</div>

<div class="outer">
  <div class="middle">
    <div class="inner">
      <div class="multi">A</div>
      <div class="multi">B</div>
      <div class="multi">C</div>
    </div>
  </div>
</div>

Answer 1

以下 css 规则应该有效。您的目标是一个阴影元素，其容器是最后一个子元素

:host(:last-child) {
    border-bottom: solid 1px pink;
}

或

:host(:last-child) > div {
    border-bottom: solid 1px pink;
}