Question

我有一个自定义组件，它使用随附的样式文件格式化自身。在包含组件中，我生成了一系列自定义组件。我希望最后一个元素的样式稍有不同，但我更希望从组件内部进行控制。可能吗？

之前我问了这个问题，但是当我寻找一个封装样式的Angular组件时，我得到了基于CSS直接应用的答案。

距离我最近的是申请insert into mytable select fld1,fld2,fldN,0 as dirty from mytable group by duplicate_field，但并没有真正起作用。

delete from mytable where dirty = 1

我准备了一个Blitzy来进行练习。目的是使最后一个元素在中间不具有金色分隔线。

Answer 1

由于div是组件宿主元素的后代，因此可以使用以下选择器：

:host(:last-child) div.lower      // Applies the style on the last component instance
:host:not(:last-child) div.lower  // Applies the style except on the last component instance

为避免最后一个组件实例出现金色分隔符，请尝试以下样式：

div.lower {
  display: flex;
  justify-content: center;
  min-width: 300px;
}

:host:not(:last-child) div.lower {
  border-top: 1px solid gold;
}

有关演示，请参见this stackblitz。

将组件样式应用于页面中的最后一次出现

1 个答案: