为什么Angular的Renderer2自定义指令无法在所有HTML中修改样式

问题原因 #

你自定义指令的选择器声明为[appChecked]（第二个单词首字母C大写），但在失效的模板中你使用的是全小写的appchecked，Angular对指令的匹配严格区分大小写，二者不一致时指令不会被触发，因此对应的样式修改逻辑没有执行。

修复方案 #

将失效模板中li标签上的appchecked修改为和指令定义一致的驼峰写法即可：

<li appChecked *ngFor="let task of doneTaskList">
  {{task.name}}
</li>

补充说明 #

Angular生态下的组件选择器、指令选择器、Input/Output属性名在模板中使用时，都需要和定义时的大小写完全匹配，否则会出现匹配失效的问题。

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