使用条件逻辑

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

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

 
 

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

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

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

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

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

1. 从angular2库中引入NgIf类型定义

1. 在组件的ViewAnnotation中通过属性directives声明对该指令的引用

使用分支逻辑

如果组件的模板需要根据某个表达式的不同取值展示不同的片段，可以使用NgSwitch系列指令 来动态切分模板。比如右边示例中的广告组件EzPromotion，需要根据来访者性别的不同推送 不同的广告：

NgSwitch包含一组指令，用来构造包含多分支的模板：

NgSwitch

NgSwitch指令可以应用在任何HTML元素上，它评估元素的ngSwitch属性值，并根据这个值 决定应用哪些template的内容（可以同时显示多个分支）：

  
  

   
   
<ANY [ng-switch]="expression">...</ANY>
  
  

NgSwitchWhen

NgSwitchWhen指令必须应用在NgSwitch指令的子template元素上，它通过属性ngSwitchWhen指定一个表达式， 如果该表达式与父节点的NgSwitch指令指定的表达式值一致，那么显示这个template的内容：

"...">
   
   
 <!--与变量比较-->
   
   
 <template [ng-switch-when"variable"</template>
   
   
<!--与常量比较-->
   
   
 ng-switch-when"constant"</template>
   
   
 NgSwitchDefault
 
 
NgSwitchDefault指令必须应用在template元素上，当没有NgSwitchWhen指令匹配 时，NgSwitch将显示这个template的内容:
 
 
 ng-switch-default</template>
   
   
 需要注意的是，NgSwitch系列指令都是Angualr2的预置指令，在模板中使用之前，需要
 
 
 
  
从Angular2库中引入NgSwitch系列指令
 
  
通过ViewAnnotation的directives属性进行声明