Angular 4 教學 - *ngIf vs [hidden] 差異

2017-10-29

-- Pageviews

Angular 4 教學 - *ngIf vs [hidden] 差異 - [hidden] 陷阱 - 1

Angular 4 要顯示或隱藏 HTML 通常會用 *ngIf 或 [hidden]，但剛開始寫 Angular 的人可能會有點混淆這兩個方法。
本篇將介紹 Angular 4 (Angular 2) 的 *ngIf 及 [hidden] 差異。

*ngIf

在 HTML 的元素屬性中插入 *ngIf="條件"，當條件建立時，該 HTML 元素才會顯示在畫面上，反之則不顯示。

1
2
3

<div *ngIf="checked">
  *ngIf
</div>

*ngIf 做法是將整個 HTML 元素從 DOM 加入或移除。

當 HTML 的元素較為複雜時，使用 *ngIf 就要小心一點，太頻繁的變換狀態可能會造成負擔。

執行結果

Angular 4 教學 - *ngIf vs [hidden] 差異 - *ngIf 範例

[hidden]

在 HTML 的元素屬性中插入 [hidden]="條件"，當條件建立時，該 HTML 元素則不顯示在畫面上，反之才會顯示。

1
2
3

<div [hidden]="!checked">
  [hidden]
</div>

[hidden] 是在 HTML 元素插入屬性 hidden，並沒有破壞原本的 DOM，所以效率會比 *ngIf 稍微好一些。

執行結果

Angular 4 教學 - *ngIf vs [hidden] 差異 - *ngIf [hidden]

[hidden] 陷阱

由於 HTML 元素的 hidden 屬性是由 Browser 控制，效果同 CSS display: none;，如果該 HTML 元素有被賦予其他的 CSS，並複寫了 display，hidden 屬性就會被影響。
如下範例：

<style>
    .sample {
        margin-bottom: 10px;
    }
    .displayBlock { 
        display: block; 
    }
</style>

<input type="checkbox" [(ngModel)]="checked" />

<div *ngIf="checked" class="sample">
    Sample 1: *ngIf
</div>

<div [hidden]="!checked" class="sample">
    Sample 2: [hidden]
</div>

<div *ngIf="checked" class="sample displayBlock">
    Sample 3: *ngIf with css display: block.
</div>

<div [hidden]="!checked" class="sample displayBlock">
    Sample 4: [hidden] with css display: block.
</div>