@HostBinding类赋值不尊重CSS：nth-​​child

Question

我遇到了以下问题，我无法想到这个问题：

我有以下应用程序结构：

AppComponent (access to Redux store)
   ||
CardStackComponent
   ||
CardComponent (many cards in a stack)

每个CardComponent可以有三种状态：已接受，已拒绝或两者都没有，由三个类代表：card--accepted，card--rejected和card--in-stack。

用户可以单击以接受或拒绝最顶层CardComponent的按钮，这会将事件冒充到AppComponent。然后，AppComponent使用reducer更新用于呈现CardComponent的Object上的accepted和rejected属性的值。在CardComponent中，我有三个@HostBinding装饰器，用于在CardComponent主机元素中添加/删除类。

@HostBinding('class.card--accepted') accepted: boolean = false;
@HostBinding('class.card--rejected') rejected: boolean = false;
@HostBinding('class.card--in-stack') inStack: boolean = true;

我按预期添加/删除了类，因为我按下按钮接受/拒绝卡片，但是，有一个奇怪的问题：为了让卡片堆叠，我使用CSS来将前三张牌绝对放在彼此的顶部，并隐藏其他牌。这非常有效，可以使用:nth-child

来实现

card--in-stack {
    &:nth-child(1) {...}
    &:nth-child(2) {...}
    &:nth-child(3) {...}
    &:nth-child(n+4) {...}
}

但是，当接受顶部卡片时，将删除课程card--in-stack并添加课程card--accepted。这意味着堆栈中的第二张卡（card--in-stack:nth-child(2)）现在应该是card--in-stack:nth-child(1)，它下面的那张卡现在应该是card--in-stack:nth-child(2)，依此类推。检查堆栈中的第二张卡片（刚刚接受的卡片下面的那张卡片），它仍然会应用card--in-stack:nth-child(2)个样式，即使它是页面上带有类card--in-stack的第一个元素。有没有办法让CSS在使用:nth-child装饰器更改组件上的类时尊重@HostBinding？