[Angular]What's Structural Directives

發表於 更新於 分類於 Disqus：

Angular2 Directives - Structural Directives : 改變DOM element的Directive。常見的structural directives有 ngIf, ngSwitch, ngFor 用法如下.

1
2
3
4
5
6
7
<div *ngIf="hero">{{ hero }}</div>
<div *ngFor="let hero of heroes">{{ hero }}</div>
<div [ngSwitch]="status">
  <template [ngSwitchWhen]="'in-mission'">In Mission</template>
  <template [ngSwitchWhen]="'ready'">Ready</template>
  <template ngSwitchDefault>Unknown</template>
</div>

Template Tag

在Angular2外，<template>預設CSS是設定為display: none. 其內容是不會顯示，在Angular2內是會被移除然後被該位置會被置換成<script></script>

在一開始的Code裡，ngIf和ngFor的前面有一個*, 而在ngSwitchWhen卻是用 <template>和[ngSwitchWhen]組合要顯示的文字。而這一個 * 的使用會帶來一些神奇的效果。下面繼續來研究

星號 (*) 的效果

常見的範例

1
2
3
<p *ngIf="condition">	
    condition is true and ngIf is true.
</p>

在ngIf前面的 * 是一個很神奇的東西，他可以讓我們少寫<template> tag，如果不要寫 * 的話，那程式碼就要寫成這樣

1
2
3
4
5
<template [ngIf]="condition">
  <p>
    condition is true and ngIf is true.
  </p>
</template>
1
2
3
4
5
6
7
8
9
<!-- Examples (A) and (B) are the same -->

<!-- (A) *ngFor div -->
<div *ngFor="let hero of heroes">{{ hero }}</div>

<!-- (B) ngFor with template -->
<template ngFor let-hero [ngForOf]="heroes">
  <div>{{ hero }}</div>
</template>

所以 * 的確省去很多工作，來改寫一下 以下的程式碼

1
2
3
4
5
<div [ngSwitch]="status">
  <template [ngSwitchWhen]="'in-mission'">In Mission</template>
  <template [ngSwitchWhen]="'ready'">Ready</template>
  <template ngSwitchDefault>Unknown</template>
</div>

用 * 來修改一下程式碼

1
2
3
4
5
<div [ngSwitch]="status">
  <span *ngSwitchWhen="'in-mission'">In Mission</span>
  <span *ngSwitchWhen="'ready'">Ready</span>
  <span *ngSwitchDefault>Unknown</span>
</div>

參考