Angular2组件开发—模板的逻辑控制（一）

使用条件逻辑

有时我们需要模板的一部分内容在满足一定条件时才显示，比如右边示例中的EzReader组件，对于试用用户，它将在正文之上额外显示一个广告：

这是指令NgIf发挥作用的场景，它评估属性ngIf的值是否为真，来决定是否渲染template元素的内容：

1 @View({
2     template : `<!--根据变量trial的值决定是否显示广告图片-->
3                 <template [ng-if]="trial==true">
4                     <img src="ad.jpg">
5                 </template>
6                 <!--以下是正文-->
7                 <pre>...</pre>`
8 })

Angular2同时提供了两种语法糖，让NgIf写起来更简单，下面的两种书写方法和上面的正式语法是等效的：

1 //使用template attribute
2 <img src="ad.jpg" template="ng-if tiral==true">
3 //使用*前缀
4 <img src="ad.jpg" *ng-if="tiral==true">

看起来，显然*ng-if的书写方法更加有人情味儿，不过无论采用哪种书写方法，都将转换成上面的正式写法，再进行编译。

需要指出的是，NgIf是Angular2预置的指令/Directive，所以在使用之前，需要：

从angular2库中引入NgIf类型定义
在组件的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         //引入NgIf类型
14         import {Component,View,bootstrap,NgIf} from "angular2/angular2";
15         
16         @Component({selector:"ez-app"})
17         @View({
18             directives:[EzReader],
19             template:`
20                 <ez-reader [trial]="true"></ez-reader>
21             `
22         })
23         class EzApp{}
24         
25         @Component({
26             selector : "ez-reader",
27             properties:["trial"]
28         })
29         @View({
30             directives:[NgIf],
31             template : `
32                    <img [src]="banner" *ng-if="trial==true">
33                 <pre>{{content}}</pre>`
34         })
35         class EzReader{
36             constructor(){
37                 var self = this;
38                 this._trial = true;
39                 this.banner = "img/banner.jpg";
40                 this.content = `
41     “没关系，我已经没有放射性了。”史强对坐在旁边的汪森说，“这两天，我让人家像洗面口袋似的翻出来洗了个遍。
42 这次会议本来没安排你参加，是我坚决要求请你来的，嘿。我保准咱哥俩这次准能出风头的。”
43 
44     史强说着，从会议桌上的烟灰缸中拣出一只雪茄屁股，点上后抽一口，点点头，心旷神怡地把烟徐徐吐到对面与会
45 者的面前，其中就有这支雪茄的原主人斯坦顿，一名美国海军陆战队上校，他向大史投去鄙夷的目光。
46 
47     这次与会的有更多的外国军人，而且都穿上了军装。在人类历史上，全世界的武装力量第一次面对共同的敌人。
48 
49     常伟思将军说：“同志们，这次与会的所有人，对目前形势都有了基本的了解，用大史的话说，信息对等了。人类
50 与外星侵略者的战争已经开始，虽然在四个半世纪后，我们的子孙才会真正面对来自异星的三体人侵者，我们现在与之
51 作战的仍是人类；但从本质上讲，这些人类的背叛者也可以看成来自地球文明之外的敌人，我们是第一次面对这样的敌人。
52 下一步的作战目标十分明确，就是要夺取‘审判日’号上被截留的三体信息，这些信息，可能对人类文明的存亡具有重要
53 意义。
54                 `;
55             }
56         }
57         
58         bootstrap(EzApp);
59     </script>
60 </body>
61 </html>