使用条件逻辑
有时我们需要模板的一部分内容在满足一定条件时才显示，比如右边示例中的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>