首页 > angular开发 > angular6.0使用教程:angular的常用指令

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

作者: 分类:angular开发 点击: 93 次
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’。

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

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

或许你会感兴趣的文章:

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

  1. tjm13469943026说道:

    这个是很有用的啊

  2. lch说道:

    很好的文章,收藏了

  3. wyh_it@126.com说道:

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

  4. steam说道:

    楼主,牛人呀。高

发表评论

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

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