Angular 中 ngIf 指令的使用

简介

ngIf 是一个 Angular 中常用的指令，主要用于根据条件是否成立进行页面元素的展示或隐藏。

使用方法

ngIf 的基本使用方法如下：

<div *ngIf="condition">条件成立时展示的内容</div>

其中 condition 可以是一个变量，也可以是一个表达式。如果 condition 为 true，则展示内容；如果为 false，则不展示。如果需要展示多个元素，则可以使用一个外包 div 包裹住需要展示的所有元素。

当然，ngIf 指令可以搭配其他指令使用，如 ngFor、ngSwitch 等。

<div *ngFor="let item of itemList" *ngIf="item.condition">条件成立时展示的内容</div>

条件为空或 null

当 condition 为空或 null 时，ngIf 的展示行为会有所不同。此时，不会展示任何内容，并且这个元素本身也不会被渲染出来。这在一些情况下非常有用，如在加载数据之前隐藏部分页面元素。

注意事项

ngIf 指令会根据条件的变化来动态展示或隐藏相应的内容。但是，如果某个绑定的值的变化频率非常高，比如说每隔几毫秒就需要重新计算一遍 condition，这样会严重影响应用程序的性能。因此，在使用 ngIf 指令时，需要注意绑定的值的变化频率，尽量减少对页面的重绘。

此外，ngIf 指令会让 Angular 发出一些异步渲染的操作。如果需要在渲染完成后执行一些逻辑，可以尝试使用 AfterViewInit 钩子函数来监听 DOM 元素的变化。

结论

ngIf 指令是一个非常实用的 Angular 指令，可以根据条件动态展示或隐藏相应的内容。当条件为空或 null 时，ngIf 不会展示任何内容。在使用 ngIf 指令时，需要注意绑定的值的变化频率。