Angular中如何向CSS类传递参数？现有绑定写法不生效如何解决

问题原因 #

你当前写法不生效的核心是：Angular默认不会自动将非标准HTML属性的插值内容绑定到DOM的Attribute上，你需要明确指定属性绑定的类型为attr，才能让自定义的status属性正确挂载到DOM元素上，匹配你的CSS属性选择器。

解决方法一（保留现有CSS写法，仅修改模板） #

将模板中的属性绑定修改为Angular官方的Attribute绑定语法即可生效：

<div [attr.status]="disableDiv" class="div-disabled"></div>

当disableDiv为true时，Angular会自动给元素添加status="true"属性，成功匹配你写的.div-disabled[status="true"]选择器，样式正常生效。

解决方法二（更推荐的Angular原生实现方案） #

使用类绑定实现相同效果，不需要依赖自定义属性，可维护性更高：

1. 调整CSS样式：

.div-disabled.is-disabled {
  pointer-events: none;
  opacity: 0.5;
  background: #CCC;
}

2. 模板中使用类绑定语法：

<div class="div-disabled" [class.is-disabled]="disableDiv"></div>

补充可选写法 #

如果坚持要用插值的写法，也可以将布尔值显式转为字符串绑定：

<div status="{{disableDiv.toString()}}" class="div-disabled"></div>

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