Angular--内置指令

[我的博客]http://www.lostbug.cn
转载请注明出处

指令

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

内置指令

ngIf

<p *ngIf="false" ></p>       <!-- never displayed-->
<p *ngIf="a > b" ></p>       <!-- displayed if a is more than b-->
<p *ngIf="str=='an'"></p>    <!-- displayed if str holds the string 'an'-->
<p ^ngIf="func()"></p>       <!-- displayed if func return a true value--> 

ngSwitch

<div [ngSwitch]="myChar">
  <div *ngSwitchCase="'A'" >Char is A</div>
  <div *ngSwitchCase="'B'" >Char is B</div>
  <div *ngSwitchCase="'C'" >Char is C</div>
  <div *ngSwitchCase="'A'" >Char is second A</div>
  <div *ngSwitchDefault>Char is the default case char</div>
</div>

ngFor

let item of items

<ul class="list-conteiner">
  <li *ngFor="let li of list;let i =index">this is 第{{i+1}}个{{li}}</li>
</ul>

ngStyle

方式一

<div [style.background-color]=" 'blue' "> </div>

方式二

<div [ngStyle]="{color:'white','background-color':'blue'}"> <div>

使用动态值

<div [ngStyle]="{color:color}" [style.font-size.px]="fontSize"></div>

ngClass

动态设置和改变DOM元素的CSS类

方式一

.style{
 backgound-color:blue;
}

<div [ngClass]="{style:true}">this has blue background color<?div>
<div [ngClass]="{style:false}">this has no blue background color</div>

方式二 类名数组

<div class="base" [ngClass]="['yellow','square']">
      这里会使用类名yellow 和square对应的样式
</div>

当然可以直接使用数组对象

this。classList=['yellow','square'];
[ngClass]="classList"

ngNonBindable

不编译，原样输出代码

this.mySite="lostbug.cn";
<div class='demo'>
  <p class="pre" ngNonBindable>this is {{mySite}}</p>
 </div>

会输出

this is {{mySite}}

not

this is lostbug.cn