Angular [class.active]绑定仅error类生效，warning和message类不生效怎么办

问题原因 #

• 核心错误是变量名大小写不匹配：JavaScript/TypeScript 属于大小写敏感的语言，你模板中类绑定使用的变量是 capsLockIsOn（首字母小写c），但组件中赋值的变量是 CapsLockIsOn（首字母大写C），二者是完全独立的两个成员属性。你对大写开头的变量赋值不会同步到模板绑定的小写开头变量上，模板里的 capsLockIsOn 会一直保持初始的 falsy 值，导致 active 类永远不会被动态添加。
• 只有 error 类场景看起来正常是CSS规则差异导致的巧合：

你的 .error 类默认设置了隐藏样式，只有 .error.active 才会设置为显示；而 .warning、.message 类的默认样式是显示状态。当 active 类永远不会被添加时，error 类默认隐藏、仅大写锁开启时显示的逻辑刚好符合你的预期，而 warning、message 类默认就显示，所以看起来功能失效。

解决方法 #

1. 统一变量名大小写，遵循小驼峰命名规范，修改组件中的赋值代码：

this.capsLockIsOn = event.getModifierState && event.getModifierState('CapsLock');

2. 统一三类提示的CSS规则，确保默认都是隐藏状态，仅添加active类时才显示：

.error, .warning, .message {
  display: none;
}
.error.active {
  color: #f5222d;
  display: block;
}
.warning.active {
  color: #faad14;
  display: block;
}
.message.active {
  color: #1890ff;
  display: block;
}

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