NgIf

NgIf 是 Angular 中提供的一个结构性指令，用于根据条件动态添加或移除视图。它可以帮助我们避免不必要的 DOM 操作，提高渲染性能。

用法

在模板中使用 *ngIf 指令，指定一个表达式作为条件。如果表达式的值为真，<ng-template> 中的内容将被渲染；否则，内容将被移除。

<!-- 显式布尔类型 -->
<div *ngIf="visible">
  这里是可见的
</div>

<!-- 隐式布尔类型 -->
<div *ngIf="user">
  <p>欢迎 {{ user.name }}！</p>
</div>

<!-- 与 else 结合使用 -->
<div *ngIf="condition; else elseBlock">
  这里是条件为真的情况
</div>
<ng-template #elseBlock>
  这里是条件为假的情况
</ng-template>

ngIf 还可以与 else、then、ng-container 等指令结合使用，实现更为复杂的 UI 控制逻辑。

与 NgSwitch 比较

NgIf 和 NgSwitch 都可用于条件性地显示视图，但它们有不同的使用场景。

NgIf 适用于静态内容：条件表达式只会在组件数据发生改变时重新求值。如果组件的数据不发生变化，NgIf 会保持原有的 DOM 结构和样式。

NgSwitch 适用于动态内容：条件表达式可能在多个用户事件之间切换，每次切换都需要重新计算视图。NgSwitch 会根据条件的值渲染不同的元素。

总结

NgIf 可以根据条件动态添加或移除视图，避免不必要的 DOM 操作，提高渲染性能。它还可以与 else、then、ng-container 等指令结合使用，实现更为复杂的 UI 控制逻辑。

如果你要在 Angular 中控制视图的显示与隐藏，NgIf 无疑是个不错的选择。