bestvist

08-24 15:57 阅读: 70 点赞: 0 评论: 0

Angular内置指令

Angular提供了若干内置指令,如果有使用过AngularJS的经验,更容易理解这些指令。

Angular中内置指令是已经导入过的,可以在组件中直接使用它们。

ngIf

如果需要根据一个条件来决定显示或隐藏一个元素时,可以使用ngIf指令,这个条件由传给指令的表达式的结果决定的。 如果表达式的结果返回的是一个假值,元素会从DOM上移除。

<div *ngIf="false"></div>
<div *ngIf="a > b"></div>
<div *ngIf="str == 'show'"></div>
<div *ngIf="fun()"></div>

使用过AngularJS的可以理解为ng-if的替代品,但Angular中并没有提供ng-show指令的替代品,可以使用ngStyle或ngClass指令。

ngSwitch

有时候需要根据一个给定的条件来渲染不同的元素。 可能会出现如下情况:

<div class="content">
    <div *ngIf="type == 'a'">show a</div>
    <div *ngIf="type == 'b'">show b</div>
    <div *ngIf="type == 'c'">show c</div>
    <div *ngIf="type != 'a' && type != 'b' && type != 'c'">show null</div>
</div>    

当条件不满足需要显示默认值时,代码会变得比较繁琐,如果再增加一种条件,后续判断会更加复杂。 对于这种情况,Angular引入了ngSwitch指令,类似于switch语句效果。 其中:

  • ngSwitchCase描述已知结果
  • ngSwitchDefault处理其他情况

重写一下上面的情况:

<div class="content" [ngSwitch]="type">
    <div *ngSwitchCase="'a'">show a</div>
    <div *ngSwitchCase="'b'">show b</div>
    <div *ngSwitchCase="'c'">show c</div>
    <div *ngSwitchDefault>show null</div>
</div>    

如果想新增一种条件,只要再添加一条ngSwitchCase。 ngSwitchDefault是可选的,如果不添加,在没有匹配到值时不做渲染。

ngSwitchCase可以多次匹配同一个值

<div class="content" [ngSwitch]="type">
    <div *ngSwitchCase="'a'">show a</div>
    <div *ngSwitchCase="'b'">show b</div>
    <div *ngSwitchCase="'c'">show c</div>
    <div *ngSwitchCase="'a'">this is a</div>
    <div *ngSwitchDefault>show null</div>
</div>

当条件满足'a'时显示:

show a
this is a
  • ngStyle 使用ngStyle指令,可以通过Angular表达式给特定的DOM元素设定CSS属性。

    background color

以上代码使用ngStyle指令把块级元素背景样式设置成black。

还可以使用键值对设置每个属性:

<div [ngStyle]="{color:'yellow', 'background-color':'black'}">background color</div>    

动态设置CSS属性

<input type="text" name="font" value="{{fontSize}}">
<div [style.font-size.px]="fontSize">    

ngClass

ngClass指令可以动态设置DOM元素的CSS类。

//css
.text-success {
    color: green;
}

//html
<div [ngClass]="{'text-success': true}">success!</div>

动态设置CSS类

<div [ngClass]="{'text-success': isSuccess}">success!</div>    

使用类名列表指定元素添加哪些类名

//css
.black {
    background-color: black;
}
.round {
    border-radius: 15px;
}

//html
<div [ngClass]="['black' , 'round']">black background and round corner</div>

ngFor

ngFor指令用来重复一个给定的DOM元素,每次重复会从数组中取值,是ng-repeat的替代品。 语法:*ngFor="let item of items"

  • let item指定一个用来接收items数组中每个元素的变量
  • items表示一个数组

//html
<div *ngFor="let c of cities">{{c}}</div>
//ts
this.cities = ['BeiJing', 'ShangHai'];

获取索引 语法:*ngFor="let item of items; let i = index" i为当前数组的索引值。

ngNonBindable

如果想要Angular不去编译页面变量绑定,显示原始内容,需要使用ngNonBindable指令。

总结

Angular的核心指令数量很少,但可以通过组合这些简单指令创建五花八门的应用。

热点文章