如何按角度按伪类应用？

Question

我有以下CSS

#auction-history div:after {
    content: "";
    width: 100%;
    height: 8px;
    position: absolute;
    bottom: -8px;
    background: #bad3e0;
    left: 0;
}

此CSS始终应用于我的DIV。

我需要基于布尔值的HTML中将此假类带有条件。

因此，当我

isLoading = true or false

需要绑定时，加载属性，如果它是真的 - 我不想在我的div上添加thius pseudeo class，如果是错误的，我需要应用

我知道我可以在Angular上应用类带有ngclass的条件，但我不知道该如何使用伪类进行此操作。

Answer 1

您可以使用::之后来创建一个其他类来处理此操作。

示例：

html

<p [class.show--after]="isLoading  == true">My name is Adrita</p>

css

.show--after::after {
   content: ' - After content';
 }

stackbiltz demo

Answer 2

只需“重新考虑”您的CSS，例如您可以使用“

#auction-history:not(.loading) div:after {
    content: "";
    ...
}

您的.html

<div #auction-history [class.loading]="yourVariable">...</div>

或简单的类

#auction-history.not-loading div:after {
    content: "";
    ...
}
 <div #auction-history [class.not-loading]="yourVariable">...</div>

注：您可以使用[ngclass]或[ngstyle]或[style.property] =“变量”或[class.classname] =“ variable”