Angular中带方括号的[hidden]="true"绑定不生效是什么原因？

[hidden]="true" 写法从未被废弃，绑定写法不生效的核心原因是CSS样式覆盖了原生hidden属性的默认隐藏效果，和Angular绑定语法本身无关。

两种写法的本质差异 #

• 不带方括号的hidden="true"是静态属性写法：Angular编译阶段直接将原生hidden全局属性写入DOM，依赖浏览器内置的用户代理样式[hidden] { display: none }实现隐藏，这种写法生效只是因为刚好没有其他样式命中覆盖。
• 带方括号的[hidden]="true"是动态属性绑定写法：最终渲染到DOM上的结果和静态写法完全一致，都是给元素加上原生hidden属性，不存在语法淘汰、失效的问题。

为什么绑定写法会失效 #

原生hidden属性的隐藏逻辑优先级极低：只要你的自定义样式、第三方UI库（Angular Material、Bootstrap、Tailwind等）的默认样式、甚至通配选择器规则，给对应元素设置了任意display属性值（比如display: flex、display: block），就会直接覆盖浏览器默认的display: none规则，导致元素保持可见。

大部分人踩这个坑，都是因为项目里存在影响范围较广的display样式规则，刚好命中了设置了hidden绑定的元素。

修复方案 #

• 最通用的方案：在全局样式文件中添加一条高优先级规则，强制保证hidden属性的隐藏效果：

  [hidden] {
    display: none !important;
  }
  

  这是Angular官方推荐的兼容写法，添加后[hidden]绑定的显隐逻辑就会和预期一致，不会被其他display样式干扰。
• 如果不需要保留元素在DOM树中，直接用*ngIf控制显隐即可，这种方式是直接增删DOM节点，完全不受CSS样式影响。
• 如果需要保留DOM节点仅切换可见性，也可以直接用样式绑定绕过属性覆盖问题：[style.display]="isHidden ? 'none' : ''"。

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