• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > angular开发 > angular6.0使用教程:angular的常用指令

    angular6.0使用教程:angular的常用指令

    作者: 分类:angular开发 点击: 1,096 次
    wordpress CMS主题:ssmay主题

      在前面的章节中,我们介绍了angular6.0的组件、模块、服务、路由、依赖注入等等。本章我们再来介绍一下angular6.0的几个常用指令,以及这些angular指令如何使用。

      1:ngIf 【如果为真,就执行;否则不执行】

      <div *ngIf="false">hhhh</div>                 如果为真,就显示hhhh, 为假就不显示
      <div *ngIf="'a' < 'b'">hhhh</div>             如果【字母a小于字母b】,就显示hhhh
      <div *ngIf="hero == 'yes'">hhhh</div>  如果变量hero的值=yes 就显示hhhh

      2:ngSwitch 【多条判断】:

      <div [ngSwitch]="hero">
      <li *ngSwitchCase="'a'">hero is a</li>   当等于a时,就显示hero is a
      <li *ngSwitchCase="'b'">hero is b</li>
      <li *ngSwitchCase="'c'">hero is c</li>
      </div>

      如果hero=’a’ 就显示hero is a; 如果hero=’b’ 就显示hero is b;

      3:ngFor 【循环数据】

      <li *ngFor="let v of hero; let num=index">      循环hero数组
      {{num+1}} ---{{v.name}}
      </li>

      输出结果:let num=index 记录每次循环的序号,从0开始

      4:ngStyle 【设置DOM元素的CSS属性】

      <li [ngStyle]="{color:'red','font-size':'30px'}" >gaogao</li>

      5:ngClass【设置DOM元素的class类】

      <li [ngClass]="{'gaogao':false}">gaogao</li>
      <li [ngClass]="{'gaogao':ssmay=='a'}">gaogao</li>

      ngClass第一个参数为类名称,第二个参数为boolean值【可以是表达式】,
      如果为真就添加第一个参数:给元素添加class属性

      <li *ngFor="let v of hero; let num=index">
      <span [ngClass]="{'show': num==1}">{{num+1}} ---{{v.name}}</span>
      </li>

      当第2次循环时,就添加class=’show’。



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201807075864.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    6条回应:“angular6.0使用教程:angular的常用指令”

    1. asd123456说道:

      很有用,刚好在学angular,谢谢!

    2. ajianmeige说道:

      angular初学者路过。。。

    3. tjm13469943026说道:

      这个是很有用的啊

    4. lch说道:

      很好的文章,收藏了

    5. wyh_it@126.com说道:

      可以参考一下,比较容易看懂

    6. steam说道:

      楼主,牛人呀。高

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.