Angular2組件開發—模板的邏輯控制（二）

本文轉載自查看原文 2015-12-14 20:36 1791 Angular2

使用分支邏輯

如果組件的模板需要根據某個表達式的不同取值展示不同的片段，可以使用NgSwitch系列指令來動態切分模板。比如右邊示例中的廣告組件EzPromotion，需要根據來訪者性別的不同推送不同的廣告：

NgSwitch包含一組指令，用來構造包含多分支的模板：

NgSwitch

NgSwitch指令可以應用在任何HTML元素上，它評估元素的ngSwitch屬性值，並根據這個值決定應用哪些template的內容（可以同時顯示多個分支）：

1 <any [ng-switch]="expression">...</any>

NgSwitchWhen

NgSwitchWhen指令必須應用在NgSwitch指令的子template元素上，它通過屬性ngSwitchWhen指定一個表達式，如果該表達式與父節點的NgSwitch指令指定的表達式值一致，那么顯示這個template的內容：

1 <any [ng-switch]="...">
2     <!--與變量比較-->
3     <template [ng-switch-when]="variable">...</template>
4     <!--與常量比較-->
5     <template ng-switch-when="constant">...</template>
6 </any>

NgSwitchDefault

NgSwitchDefault指令必須應用在NgSwitch指令的子template元素上，當沒有NgSwitchWhen指令匹配時，NgSwitch將顯示這個template的內容:

1 <any [ng-switch]="...">
2     <template ng-switch-default="">...</template>
3 </any>

需要注意的是，NgSwitch系列指令都是Angualr2的預置指令，在模板中使用之前，需要

從Angular2庫中引入NgSwitch系列指令
通過ViewAnnotation的directives屬性進行聲明

例如：

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>Interpolation</title>
 6     <script type="text/javascript" src="lib/system@0.16.11.js"></script>
 7     <script type="text/javascript" src="lib/angular2.dev.js"></script>
 8     <script type="text/javascript" src="lib/system.config.js"></script>
 9 </head>
10 <body>
11     <ez-app></ez-app>
12     <script type="module">
13         //引入NgSwitch類型
14         import {Component,View,bootstrap,NgSwitch,NgSwitchWhen,NgSwitchDefault} from "angular2/angular2";
15         
16         @Component({selector:"ez-app"})
17         @View({
18             directives:[EzPromotion],
19             template:`
20                 <ez-promotion gender="Female"></ez-promotion>
21             `
22         })
23         class EzApp{}
24         
25         @Component({
26             selector : "ez-promotion",
27             properties:["gender"] 28         })
29         @View({
30  directives:[NgSwitch,NgSwitchWhen,NgSwitchDefault], 31             template : `
32                 <div [ng-switch]="gender">
33                     <template ng-switch-when="Male">
34                         <img src="img/male-ad.jpg">
35                     </template>
36                     <template ng-switch-when="Female">
37                         <img src="img/female-ad.jpg">
38                     </template>
39                     <template ng-switch-default>
40                         <h1>Learn Something, NOW!</h1>
41                     </template>                    
42                 </div>
43             `
44         })
45         class EzPromotion{}
46         
47         bootstrap(EzApp);
48     </script>
49 </body>
50 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Angular2組件開發—模板語法（一） Angular2組件開發—為模板應用樣式（一） Angular2組件開發—調用服務（三） Angular2組件開發—屬性與事件（一） Angular2組件開發—屬性與事件（二） Angular2組件開發—表單輸入（一） Angular2組件開發—調用服務（一）詳解angular2組件中的變化檢測機制（對比angular1的臟檢測） Angular2組件與指令的小實踐——實現一個圖片輪播組件 Angular2開發拙見——組件規划篇