Angular2入门——(3)模板的逻辑控制

使用条件逻辑

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

@H_301_8@

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

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

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

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

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

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

从angular2库中引入NgIf类型定义

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

使用分支逻辑

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

@H_301_8@

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

@H_301_8@ NgSwitch

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

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

@H_301_8@ 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属性进行声明

NgFor- 循环逻辑

@H_301_8@ 如果希望利用一组可遍历的数据动态构造模板，那么应当使用NgFor指令。例如右边示例中的EzStar组件，用来展示演员的作品列表：

@H_301_8@ 迭代

NgFor指令应用在template元素上，对ngForOf属性指定的数据集中的每一项实例化一个 ng-for [ng-for-of"items"<li>----------</li>

</template>

@H_301_8@ 如果items数据集有3条记录，那么会生成3个li对象，就像这样：

</li>
   
   </li>

@H_301_8@ 不过这没多大用。

@H_301_8@ 使用数据项

@H_301_8@ 好在我们还可以为数据集的每一项声明一个局部变量，以便在模板内引用：

 #item{{item}} 假如items数据集是一个数组：["China","India","Russia"]，那么 现在生成的结果就有点用了： 
 ChinaIndiaRussia 使用数据项索引 
 @H_301_8@ 有时还需要数据项在数据集中的索引，我们也可以为数据集的每一项的索引声明一个 局部变量，以便在模板内引用： 
  #item #i"index"[{{i+1}}] {{item}} 现在生成的结果更规矩了： 
 [1] China[2] India[3] Russia 语法糖 
 @H_301_8@ 与NgIf类似，Angular2也为NgFor提供了两种语法糖： 
 //使用template attribute
   
   ANY @H_85_404@"ng-for #item of items;#i=index">...</ANY>
   
   //使用*前缀
   
   ANY for"#item of items;#i=index">
  
   
 @H_301_8@ 毫无疑问，应当尽量使用*ng-for的简便写法，这可以提高模板的可读性。 
 @H_301_8@ 
  
 @H_502_435@长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”，带你探索前端的奥秘。

Angular2入门——(3)模板的逻辑控制

使用条件逻辑

使用分支逻辑

NgFor- 循环逻辑

猜你在找的Angularjs相关文章