通常web開發者會選擇將元素樣式屬性display設為none來隱藏目標元素。采用這種方式，這些元素雖然不可見卻仍然保存在DOM中，這樣帶來的好處是，如果元素不久就需要再次顯示，組件不需要重新被初始化，組件的狀態因為之前被保留所以可以馬上顯示。但是將元素隱藏也會帶來別的問題，在Angular應用裏，如果隱藏一個元素，它仍然保留在DOM樹中，Angular會繼續檢測那些可能發生變化的數據綁定，組件的所有行為將會保持，這種情況下，組件及其所有的子節點仍然會占用資源，消耗更多的內存，從而影響性能。

NgStyle和NgIf兩種指令均可以實現控制元素的顯示，具體如下：

使用NgStyle指令可以通過改變樣式將元素隱藏，當在組件中使用NgStyle指令進行如下設置時，可以將組件在DOM樹中隱藏，示例代碼如下：

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

NgIf指令不是通過改變樣式將元素隱藏，而是根據輸入變量布爾值，在輸入變量值為false時，把這些元素從DOM中移除，停止監測相關組件綁定的屬性是否有變化，釋放它的DOM事件監聽器並且銷毀組件，組件將會被垃圾回收並且釋放內存。示例代碼如下：

<div *ngIf="condition‘‘>當condition的值為true，此組件可見</div>

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

NgStyle和NgIf控制HTML標簽顯示的區別