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