YuShu Hsiao

首先介紹

*ngIf

用法非常簡單，

在要控制的標籤內直接使用 *ngIf 後面接一個boolean 值

<div *ngIf="h4_counter%2 == 0">
  <a href="http://www.facebook.com.tw"><img src="../../assets/images/facebook.png"></a>
</div>

就可以直接使用，但是要特別注意的是

這種結構型指令會透過新增、刪除來動態的改變DOM的元素，

也就是說，當條件不成立的時候，他是完全刪掉整個DOM元素，

如果DOM裡面有使用其他的component的話，就必須要考慮到內嵌component的生命週期，

畢竟刪除之後再新增回來，裡面的變數都是重新初始化，不會保留上一次刪除前的資料。

 

ngSwitch

安裝保哥設計的code snitppet 之後，直接打a-ngs 就會跳出 intellisense

選擇a-ngSwitch之後，按下Tab鍵會出現以下的程式碼區段

<div [ngSwitch]="conditionExpression">
   <div *ngSwitchCase="expression">output</div>
   <div *ngSwitchDefault>output2</div>
</div>

修改一下內容，

"conditionExpression" =>改為要判斷的條件

"expression" => 改為要判斷的值

code snippet 產生的 <div></div> 可以改為<ng-container></ng-container> 這樣版型才不會跑掉

畫面上不會產生額外的div

<ng-container [ngSwitch]="h4_counter%2 ">
	<ng-container *ngSwitchCase="1">
		<a href="#"><img src="../../assets/images/facebook.png"></a>
		<a href="#"><img src="../../assets/images/twitter.png"></a>
		<a href="#"><img src="../../assets/images/googleplus.png"></a>
	</ng-container>
	<ng-container *ngSwitchCase="0">
		<a href="#"><img src="../../assets/images/plurk.png"></a>
		<a href="#"><img src="../../assets/images/weibo.png"></a>
		<a href="#"><img src="../../assets/images/rss.png"></a>
	</ng-container>
	<div *ngSwitchDefault>N/A</div>
</ng-container>

這樣就會按照h4_counter的值自動切換。

ngFor

首先在component.ts內定義要給For迴圈使用的資料來源，

注意到'href-link' ，因為使用了符號 '-' ，所以要使用單引號將

data = [
    {
      title: 'Google',
      'href-link': 'http://www.google.com.tw',
      date: '2018/05/10',
      content: '<p>Google Content</p>'
    },
    {
      title: 'Facebook',
      'href-link': 'http://www.facebook.com.com.tw',
      date: '2018/05/11',
      content: '<p>Facebook Content</p>'
    },
    {
      title: 'Yahoo',
      'href-link': 'http://www.yahoo.com.tw',
      date: '2018/05/12',
      content: '<p>Yahoo Content</p>'
    }
  ];

在template:component.html 用法跟上面兩種Structure Directive很類似

使用 a-ngFor 來叫出Intellisense

使用迴圈內的資料，注意href-link 因為有特殊符號，所以不能用物件'.'的方式貸出資料，要用中括號，括號裡面接字串

其餘的部分就用property binding 跟 interpolation binding(內嵌) 去呈現資料

還有可以使用 let 變數名稱 = index 來使用現在迴圈所用的index

<div>
    <div id="id_{{_idx}}" *ngFor="let item of data;let _idx = index">
        <a [href]="item['href-link']">{{item.title}}</a>
        <br>
        <span>Date:{{item.date}}</span>
        <span [innerHTML]="item.content"></span>
    </div>
</div>

PS.如果要內嵌繫節的內容有HTML Element的話，使用innerHTML 將HTML Element 注入到span之中

例如:item.content 內容有 content: '<p>Google Content</p>' 

在這邊就要使用 HTML 的property: innerHTML 繫結 Property Binding 將HTML Element 注入

否則畫面上會直接跑出<p>Google Content</p>

PS.使用 Structure Directive 的時候要注意，當資料來源有異動時，

Structure Directive 會重新產生component內容，

例如:父元件有一個物件陣列，子元件在template內使用 *ngFor 將陣列內容撈出來使用，

當父元件陣列內的物件有異動的時候，子元件透過 *ngFor 產生的DOM將會重新產生!!