NgStyle和NgIf控制HTML标签显示的区别

通常web开发者会选择将元素样式属性display设为none来隐藏目标元素。采用这种方式，这些元素虽然不可见却仍然保存在DOM中，这样带来的好处是，如果元素不久就需要再次显示，组件不需要重新被初始化，组件的状态因为之前被保留所以可以马上显示。但是将元素隐藏也会带来别的问题，在Angular应用里，如果隐藏一个元素，它仍然保留在DOM树中，Angular会继续检测那些可能发生变化的数据绑定，组件的所有行为将会保持，这种情况下，组件及其所有的子节点仍然会占用资源，消耗更多的内存，从而影响性能。

NgStyle和NgIf两种指令均可以实现控制元素的显示，具体如下：

使用NgStyle指令可以通过改变样式将元素隐藏，当在组件中使用NgStyle指令进行如下设置时，可以将组件在DOM树中隐藏，示例代码如下：

NgStyle指令

<div [ngStyle]="{'display': 'none'}">display none</div>

NgIf指令不是通过改变样式将元素隐藏，而是根据输入变量布尔值，在输入变量值为false时，把这些元素从DOM中移除，停止监测相关组件绑定的属性是否有变化，释放它的DOM事件监听器并且销毁组件，组件将会被垃圾回收并且释放内存。示例代码如下：

NgIf指令

<div *ngIf="condition''>当condition的值为true，此组件可见</div>

-- 我是大自然的搬运工，原文摘自：《揭秘Angular 2》-- 228页。