Angular 2中如何通过HTML依据布尔值控制元素的显示与隐藏？

嗨，这个需求在Angular 2里用内置的指令就能纯HTML搞定，完全不用额外写TypeScript逻辑，给你两种最常用的方案，你可以根据实际场景选择：

方案1：使用*ngIf结构型指令（推荐场景：不需要保留DOM元素） #

*ngIf是Angular核心的结构型指令，它会直接添加/移除DOM元素来实现显隐：

<!-- 替换yourBooleanVariable为你的布尔变量名 -->
<div *ngIf="yourBooleanVariable">
  当变量为true时，我会被渲染到DOM中显示；为false时，我会被完全移除
</div>

注意：*ngIf不是简单的视觉隐藏，而是直接操作DOM节点，所以如果你的元素不需要在隐藏时保留DOM状态（比如输入框的内容、绑定的事件监听），用这个方案更高效。

方案2：使用[hidden]属性绑定（推荐场景：需要保留DOM元素） #

如果你希望元素隐藏时仍然留在DOM里（比如要保留元素的状态或绑定关系），可以用属性绑定控制hidden属性：

<!-- 注意这里取反了变量，因为hidden为true时元素会被隐藏 -->
<div [hidden]="!yourBooleanVariable">
  当变量为true时，hidden属性为false，我正常显示；为false时，hidden属性为true，我被隐藏（DOM仍存在于页面中）
</div>

补充：[hidden]本质是通过CSS的display: none来隐藏元素，所以如果你的元素有自定义的display样式，可能需要额外调整样式优先级确保生效。

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