Angular 使用 [hidden] 属性控制元素可见性有什么问题？

Question

使用 [hidden] 属性控制元素可见性有什么问题？

<div [hidden]="!showGreeting">
  Hello, there!
</div>

当在对应的 DOM 元素上设置 display: flex 属性时，尽管 [hidden] 对应的表达式为 true ，但元素却能正常显示。对于这种特殊情况，则推荐使用 *ngIf 。

hidden 属性会将元素从页面中隐藏，但它仍然占据空间并保持在文档流中。此外， hidden 只在视觉上隐藏元素，但无法对其进行访问或交互。如果需要完全从文档流中移除，可能要考虑 display: none 。