如何通过条件判断动态修改PrimeNG的styleClass？

问题原因 #

PrimeNG的<p-button>是封装组件，[ngClass]会把类添加到组件的宿主元素上，而非内部实际的按钮DOM元素，导致你原来的:host ::ng-deep样式无法正确匹配动态添加的类。

解决方案（推荐：使用组件原生styleClass绑定） #

PrimeNG的<p-button>提供了styleClass输入属性，可直接动态绑定类名，类会直接作用到内部按钮元素上，完美适配你的样式写法：

1. 单个条件判断

<p-button [styleClass]="2 > 0 ? 'p-button-override' : ''">next</p-button>

2. 多个条件组合
   如果需要同时控制多个类，可通过字符串拼接实现：

<p-button [styleClass]="(isGreen ? 'p-button-override' : '') + ' ' + (isLarge ? 'p-button-lg' : '')">next</p-button>

对应的CSS保持原有写法即可：

:host ::ng-deep .p-button-override{ background-color: green; }

备选方案：调整ngClass的CSS选择器 #

如果坚持使用ngClass，需修改CSS选择器，通过宿主元素的类来控制内部按钮样式：

HTML代码：

<p-button [ngClass]="{'p-button-override-host': 2 > 0}">next</p-button>

CSS代码：

:host.p-button-override-host ::ng-deep .p-button { background-color: green; }

这里将类名加到组件宿主上，再通过宿主类选择内部的.p-button元素应用样式。

内容的提问来源于stack exchange，提问作者Donkey Monkey