如果我对你的问题理解正确的话，你想知道如何使用一个angular指令来动态地设置before/after伪标记的样式。
不要使用ng-style，而是使用ng-class来附加一个类，这个类将确定要使用哪个before/after伪类。

<ul class="breadcrumb">
     <li><a href="#" ng-class="someBooleanInScope? 'color-0' : 'color-1'">Home</a></li>
</ul>

字符串
在CSS中：

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}
.breadcrumb li a.color-0:after {
    background: black;
}
.breadcrumb li a.color-1:after {
    background: blue;
}

型

其他的答案不允许你基于控制器变量的值来设计元素的样式，这个答案可以！
使用@HostBinding来定义CSS变量，然后您可以在.scss文件中使用这些变量，从而非常容易地动态设置:before和:after的样式。
.ts：

size = 10
padding = 2
@HostBinding('attr.style')
public get cssVars() {
  return `
    --switch-size: ${this.size};
    --switch-padding: ${this.padding};
    --switch-size-inner: ${this.size - this.padding * 2};
  `;
}

字符串
.scss：

.my-class:before {
  height: calc(var(--switch-size) * 1px);
}

型
注意：有些人在使用这种方法时使用DomSanitizer，但我认为没有必要（没有它也能工作）-参见https://stackoverflow.com/a/64252610/1205871

在这种情况下，我会避免使用ng-style，你可能会发现使用ng-class并应用不同的类更容易，这将允许你将所有的CSS放在一个地方，而不是在HTML中覆盖。
只需将您的代码更改为：

<li><a href="#" ng-class="{ 'breadcrumb-color': subCategory }">Home</a></li>

字符串
其中subCategory应该是一个布尔值，在单击时设置subCategory，然后它将添加breadcrumb-color作为类值，你应该得到这样的结果：

<li><a href="#" class="breadcrumb-color">Home</a></li>

型
一些示例css，现在你可以设置之前和之后，你请：

.breadcrumb-color li a {
    background: red;
}
.breadcrumb-color li a:after { 
    background: red;
}

型

ng-class应该为你想做的事情工作。

<li><a href="#" ng-style="ng-class="{beforeCSS: amIBeforeElement()}"">Home</a></li>

字符串
粗编码example

您可以在CSS中定义颜色：

.breadcrumb li a.main-category {
    background: hsla(34, 85%, 35%, 1);
}
.breadcrumb li a.main-category:after {
    border-left-color: hsla(34, 85%, 35%, 1);
}
.breadcrumb li a.sub-category {
    background: hsla(44, 75%, 45%, 1);
}
.breadcrumb li a.sub-category:after {
    border-left-color: hsla(44, 75%, 45%, 1);
}
/* ... and so on for other categories */

字符串
然后使用ngClass：

<ul class="breadcrumb">
    <li><a href="#" ng-class="{'main-category': isMainCategoryActive(), 'sub-category': isSubCategoryActive()}">Home</a></li>
    <!-- ... other breadcrumbs -->
</ul>

型
在您的控制器中设置上述功能。

$scope.isMainCategoryActive = function() {
    // Your logic to determine if main category is active
    return true; // Or false
};
$scope.isSubCategoryActive = function() {
    // Your logic to determine if sub category is active
    return false; // Or true
};

型