有時我們需要模板的一部分內容在滿足一定條件時才顯示，比如右邊示例中的ezreader元件， 對於試用使用者，它將在正文之上額外顯示乙個廣告：
這是指令ngif發揮作用的場景，它評估屬性ngif的值是否為真，來決定是否渲染template元素的內容：
@view看起來，顯然*ng-if的書寫方法更加有人情味兒，不過無論採用哪種書寫方法，都將轉換 成上面的正式寫法，再進行編譯。()angular2同時提供了兩種語法糖，讓ngif寫起來更簡單，下面的兩種書寫方法和上面 的正式語法是等效的：
//使用template attribute
//使用*字首
需要指出的是，ngif是angular2預置的指令/directive，所以在使用之前，需要：
從angular2庫中引入ngif型別定義
在元件的viewannotation中通過屬性directives宣告對該指令的引用
如果元件的模板需要根據某個表示式的不同取值展示不同的片段，可以使用ngswitch系列指令 來動態切分模板。比如右邊示例中的廣告元件ezpromotion，需要根據來訪者性別的不同推送 不同的廣告：
ngswitch包含一組指令，用來構造包含多分支的模板：
ngswitch
ngswitch指令可以應用在任何html元素上，它評估元素的ngswitch屬性值，並根據這個值 決定應用哪些template的內容（可以同時顯示多個分支）：
[ngswitchwhenng-switch]=
"expression"
>
...
ngswitchwhen指令必須應用在ngswitch指令的子template元素上，它通過屬性ngswitchwhen指定乙個表示式， 如果該表示式與父節點的ngswitch指令指定的表示式值一致，那麼顯示這個template的內容：
[ngswitchdefaultng-switch]=
"..."
>
[ng-switch-when]=
"variable"
>
...ng-switch-when
="constant"
>
...
ngswitchdefault指令必須應用在ngswitch指令的子template元素上，當沒有ngswitchwhen指令匹配 時，ngswitch將顯示這個template的內容:
[需要注意的是，ngswitch系列指令都是angualr2的預置指令，在模板中使用之前，需要ng-switch]=
"..."
>
ng-switch-default
>
...
從angular2庫中引入ngswitch系列指令
通過viewannotation的directives屬性進行宣告
如果希望利用一組可遍歷的資料動態構造模板，那麼應當使用ngfor指令。 例如右邊示例中的ezstar元件，用來展示演員的作品列表：
ngfor指令應用在template元素上，對ngforof屬性指定的資料集中的每一項 例項化乙個template的內容：
ng-for如果items資料集有3條記錄，那麼會生成3個li物件，就像這樣：[ng-for-of]=
"items"
>
----------
----------不過這沒多大用。----------
----------
使用資料項
好在我們還可以為資料集的每一項宣告乙個區域性變數，以便在模板內引用：
ng-for假如items資料集是乙個陣列：["china","india","russia"]，那麼 現在生成的結果就有點用了：[ng-for-of]=
"items"
#item
>
}
china使用資料項索引india
russia
有時還需要資料項在資料集中的索引，我們也可以為資料集的每一項的索引宣告乙個 區域性變數，以便在模板內引用：
ng-for現在生成的結果更規矩了：[ng-for-of]=
"items"
#item#i
="index"
>
[}] }
[1] china語法糖[2] india
[3] russia
與ngif類似，angular2也為ngfor提供了兩種語法糖：
//使用template attribute毫無疑問，應當盡量使用*ng-for的簡便寫法，這可以提高模板的可讀性。<
any
template
="ng-for #item of items;#i=index"
>...
any>
//使用*字首
<
any *ng
-for
="#item of items;#i=index"
>...
any>
「前端那些事兒」，帶你探索前端的奧秘。
Angular2入門學習
最近專案使用angular2,1和2版本變化大變樣。下面總結一些學習 及安裝步驟。中文官網 必看 懶人學習 支援bootstrap ui元件 安裝環境，首先需要安裝cli，記得全域性安裝 angular cli安裝 npm install g angular cli cli安裝後，我們可以用ng開頭...
angular2 模板驅動型表單
要使用模板驅動型表單，我們必須先導入formsmodule模組。ngmodule template.component.html template.component.ts import from angular core component export class templatecompone...
Angular2入門系列教程3 多個元件，主從關係
好了，前面簡單介紹了angular2的基本開發，並且寫了乙個非常簡單的元件，這篇文章我們將要學會編寫多個元件並且有主從關係 現在，假設我們要做乙個部落格，部落格的的文章具有主從關係，文章和文章詳情 現在，我們新建乙個article的資料夾和其元件的基本架構 順便說一下，我使用的是vs code 有個...