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>