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

前端之家收集整理的这篇文章主要介绍了Angular2入门——(3)模板的逻辑控制前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用条件逻辑

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

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内容(可以同时显示多个分支):

      
      
    1. <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的预置指令,在模板中使用之前,需要

    1. 从Angular2库中引入NgSwitch系列指令
    2. 通过ViewAnnotation的directives属性进行声明

  • NgFor- 循环逻辑

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

    迭代

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

  • </template>
  • 如果items数据集有3条记录,那么会生成3个li对象,就像这样:

    </li>
       
       
  • </li>
  • 不过这没多大用。

    使用数据项

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

     #item{{item}} 假如items数据集是一个数组:["China","India","Russia"],那么 现在生成的结果就有点用了:

    ChinaIndiaRussia 使用数据项索引

    有时还需要数据项在数据集中的索引,我们也可以为数据集的每一项的索引声明一个 局部变量,以便在模板内引用:

     #item #i"index"[{{i+1}}] {{item}} 现在生成的结果更规矩了:

    [1] China[2] India[3] Russia 语法糖

    NgIf类似,Angular2也为NgFor提供了两种语法糖:

    //使用template attribute
       
       
  • ANY @H_973_404@"ng-for #item of items;#i=index">...</ANY>
  • //使用*前缀
  • ANY for"#item of items;#i=index">
  • 毫无疑问,应当尽量使用*ng-for的简便写法,这可以提高模板的可读性。


    长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”,带你探索前端的奥秘。

    原文链接:https://www.f2er.com/angularjs/149416.html

    猜你在找的Angularjs相关文章