4.3 NgIf 条件逻辑 - RLwu/angular-start GitHub Wiki
有时我们需要模板的一部分内容在满足一定条件时才显示，比如右边示例中的EzReader组件， 对于试用用户，它将在正文之上额外显示一个广告：
这是指令NgIf发挥作用的场景，它评估属性ngIf的值是否为真，来决定是否渲染 template元素的内容：
@Component({
template : `
<!--根据变量trial的值决定是否显示广告图片-->
<template [ngIf]="trial==true">
<img src="ad.jpg">
</template>
<!--以下是正文-->
<pre>...
` })
Angular2同时提供了两种语法糖，让NgIf写起来更简单，下面的两种书写方法和上面 的正式语法是等效的：
//使用template attribute
<img src="ad.jpg" template="ngIf tiral==true">
//使用*前缀
<img src="ad.jpg" *ngIf="tiral==true">
看起来，显然*ngIf的书写方法更加有人情味儿，不过无论采用哪种书写方法，都将转换 成上面的正式写法，再进行编译。
//引入NgIf类型
import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
@Component({
selector : "ez-reader",
properties:["trial"],
template : `
<img [src]="banner" *ngIf="trial==true" class="banner">
<pre>{{content}}</pre>`
})
class EzReader{
constructor(){
var self = this;
this._trial = true;
this.banner = "img/banner.jpg";
this.content = `
“没关系，我已经没有放射性了。”史强对坐在旁边的汪森说，“这两天，我让人家像洗面口袋似的翻出来洗了个遍。
这次会议本来没安排你参加，是我坚决要求请你来的，嘿。我保准咱哥俩这次准能出风头的。”
史强说着，从会议桌上的烟灰缸中拣出一只雪茄屁股，点上后抽一口，点点头，心旷神怡地把烟徐徐吐到对面与会
者的面前，其中就有这支雪茄的原主人斯坦顿，一名美国海军陆战队上校，他向大史投去鄙夷的目光。
这次与会的有更多的外国军人，而且都穿上了军装。在人类历史上，全世界的武装力量第一次面对共同的敌人。
常伟思将军说：“同志们，这次与会的所有人，对目前形势都有了基本的了解，用大史的话说，信息对等了。人类
与外星侵略者的战争已经开始，虽然在四个半世纪后，我们的子孙才会真正面对来自异星的三体人侵者，我们现在与之
作战的仍是人类；但从本质上讲，这些人类的背叛者也可以看成来自地球文明之外的敌人，我们是第一次面对这样的敌人。
下一步的作战目标十分明确，就是要夺取‘审判日’号上被截留的三体信息，这些信息，可能对人类文明的存亡具有重要
意义。
`;
}
}
@Component({
selector:"ez-app",
directives:[EzReader],
template:`
<ez-reader [trial]="true"></ez-reader>
`
})
class EzApp{}
bootstrap(EzApp);