Angular 2 - 动态更改after CSS元素

Question

我们正在处理Web应用程序中的工作流元素，但在尝试更新背景颜色以指示完成时遇到问题。工作流程栏是一个矩形，右侧有一个横向三角形。三角形是通过CSS构建的伪元素，类似于：

.navwizard > li > a:after { 
    ....
    background-color:#eeeeee,
    ....
}

我们希望在状态更改后更新背景颜色以表示成功，但我不确定如何在Angular 2的范围内执行此操作。有没有办法执行此操作？

Answer 1

您可以在完成后将成功类应用于.navwizard元素

.navwizard.success > li > a:after {
    background-color: green;
}

您可以将此类应用于ngClass指令https://angular.io/api/common/NgClass

Answer 2

您可以使用angular在成功时向此元素添加一个类，并像这样创建一个css块。

.navwizard > li > a.success:after { background-color: #000; }

记住javascript只是＆＃34;只有＆＃34;用于操纵元素。定制应尽可能保留css